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