Zepto picLazyLoad Plugin，圖片懶加載的Zepto插件

嗯，學着國外人起名字Zepto picLazyLoad Plugin確實看起來高大上，其實js代碼沒幾句，並且我每次寫js都捉襟見肘，淚奔～～～

圖片懶加載有不少js插件，很是著名的屬jQuery的Lazy Load了。本身作手機項目上也須要圖片懶加載，並且手機上的圖片懶加載有兩種：一種是普通img標籤的，一種是div標籤（或者其餘標籤）上加背景圖片的。因此就練手寫了個支持以上兩種狀況的Zepto小插件。

功能：

• 支持img標籤圖片懶加載、div標籤（或者其餘標籤）的背景圖片懶加載；
• 支持預加載。默認是圖片出如今屏幕時開始加載，能夠設置threshold參數，如threshold:100，此時圖片出如今屏幕以前100px時開始加載；
• 背景圖片懶加載時，自動添加base64的1*1透明圖片作默認背景圖。也能夠自定義默認背景圖，參數爲placeholder。

使用方法：

引用1.1.3的Zepto（我只測過這個目前最新版），並引用picLazyLoad.js。→picLazyLoad.js← →picLazyLoad.min.js←

<script src="1.1.3/zepto.min.js"></script>
<script src="1.0/zepto.picLazyLoad.min.js"></script>

在要懶加載的標籤上，加類名或者id名，方便調用。在標籤上加data-original="original.jpg"，original.jpg爲實際加載圖片路徑。若是是img標籤，還須要加src="blank.png"。blank.png爲默認背景圖，建議用base64圖。例如：

<img class="test-lazyload" src="blank.png" data-original="original.jpg">
<div class="test-lazyload" data-original="original.jpg"></div>

調用：

$('.test-lazyload').picLazyLoad();

如需加參數：

$('.test-lazyload').picLazyLoad({
    threshold: 100,
    placeholder: 'http://image.yihaodianimg.com/front-homepage/global/images/blank.gif'
});

→示例DEMO←

已知問題：

• iPhone 5S 7.1.1裏，全部瀏覽器，網頁滑到下面，刷新網頁，不執行onscroll方法，獲取不到scrolltop值。致使此時刷新網頁，網頁下方的圖片沒有默認加載。

待增長功能：

• 如今是直接顯示圖片show，之後增長fadeIn圖片淡入；
• 如今是隻能根據窗口懶加載圖片，待增長根據容器、tab選項卡等。

小提示：

• 使用背景圖片比使用img標籤懶加載瀏覽器顯示速度要快，不知道是否是後者多了一步替換src路徑操做致使的；
• 若是要兼容更多的設備，使用背景圖片能夠顯示更清晰，由於能夠設置background-size，以前的文章有提到過。

>>原創文章，歡迎轉載。轉載請註明：轉載自西門的後花園，謝謝！ >>原文連接地址：http://ons.me/484.html