圖片延遲載入 jQuery插件：jQuery.lazyload <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; } .pg-hea ...
圖片延遲載入
jQuery插件：jQuery.lazyload
$(function(){
$('img.lazy').lazyload({
//container: $('.product-list'), // 對指定標簽對象內的圖片實現效果，表示在此標簽中滾動時，觸發載入（註意：如果容器未設置height和overfload:auto，那麼會預設載入所有圖片）
threshold: 100, //當圖片頂部距離顯示區域還有100像素時，就開始載入
placeholder : "img/grey.gif", // 圖片未載入時，占位
effect: "slideDown", // 圖片出現的效果，值有show(直接顯示),fadeIn(淡入),slideDown(下拉)
effect_speed: 1000, // 效果出現的時間
event: 'scroll', // 滾動滾輪時觸發，可以是：click、mouseover等
data_attribute: 'original', // img標簽中保存url的自定義屬性，預設：data-original
skip_invisible: true, // 是否跳過已經隱藏的圖片（display:none）
failure_limit: 2, // 由於延遲載入是根據Dom從上到下執行
// 如果遇到Dom位置在上，但是圖片定位在下導致看不到，那麼會以為之後的圖片不在應用延遲載入
// 此處的failure_limit用於限制如果出現N個【Dom位置在上，但是圖片定位在下】才終止
appear: function(){ // 當圖片位置剛出現在視圖時，觸發此事件
$(this).attr('src');
},
load: function(){ // 當圖片路徑載入之後，觸發此事件
$(this).attr('src');
}
});
})
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; } .pg-header{ height: 48px; background-color: #3b5998; } .w{ width: 980px; margin: 0 auto; } .clearfix:after{ clear: both; content: '.'; visibility: hidden; height: 0; display: block; } .product-list .item{ float: left; height: 240px; width: 184px; overflow: hidden; border: 1px solid red; padding: 5px; } .product-list .item .lazy{ height: 200px; width: 184px; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="w"> <div class="product-list clearfix"> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> <div class="item"> <img class="lazy" data-original="img/1.png"/> </div> <div class="item"> <img class="lazy" data-original="img/2.png" /> </div> <div class="item"> <img class="lazy" data-original="img/3.png"/> </div> <div class="item"> <img class="lazy" data-original="img/4.png"/> </div> <div class="item"> <img class="lazy" data-original="img/5.png"/> </div> <div class="item"> <img class="lazy" data-original="img/6.png" /> </div> <div class="item"> <img class="lazy" data-original="img/7.png"/> </div> <div class="item"> <img class="lazy" data-original="img/8.png"/> </div> <div class="item"> <img class="lazy" data-original="img/9.png" /> </div> <div class="item"> <img class="lazy" data-original="img/10.png" /> </div> <div class="item"> <img class="lazy" data-original="img/11.png"/> </div> <div class="item"> <img class="lazy" data-original="img/12.png"/> </div> <div class="item"> <img class="lazy" data-original="img/13.png"/> </div> <div class="item"> <img class="lazy" data-original="img/14.png" /> </div> <div class="item"> <img class="lazy" data-original="img/15.png" /> </div> <div class="item"> <img class="lazy" data-original="img/16.png" /> </div> <div class="item"> <img class="lazy" data-original="img/17.png" /> </div> </div> </div> </div> <div class="pg-footer"></div> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery.lazyload.js"></script> <script> $(function(){ $('img.lazy').lazyload({ //container: $('.product-list'), // 對指定標簽對象內的圖片實現效果，表示在此標簽中滾動時，觸發載入（註意：如果容器未設置height和overfload:auto，那麼會預設載入所有圖片） threshold: 100, //當圖片頂部距離顯示區域還有100像素時，就開始載入 placeholder : "img/grey.gif", // 圖片未載入時，占位 effect: "slideDown", // 圖片出現的效果，值有show(直接顯示),fadeIn(淡入),slideDown(下拉) effect_speed: 1000, // 效果出現的時間 event: 'scroll', // 滾動滾輪時觸發，可以是：click、mouseover等 data_attribute: 'original', // img標簽中保存url的自定義屬性，預設：data-original skip_invisible: true, // 是否跳過已經隱藏的圖片（display:none） failure_limit: 2, // 由於延遲載入是根據Dom從上到下執行 // 如果遇到Dom位置在上，但是圖片定位在下導致看不到，那麼會以為之後的圖片不在應用延遲載入 // 此處的failure_limit用於限制如果出現N個【Dom位置在上，但是圖片定位在下】才終止 appear: function(){ // 當圖片位置剛出現在視圖時，觸發此事件 $(this).attr('src'); }, load: function(){ // 當圖片路徑載入之後，觸發此事件 $(this).attr('src'); } }); }) </script> </body> </html>例
