jquery插件如何實現懶漢式加載圖片

這篇文章主要為大家展示了“jquery插件如何實現懶漢式加載圖片”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery插件如何實現懶漢式加載圖片”這篇文章吧。

{insert_scripts files='jquery-1.8.3.min.js,jquery.lazyload.js,use_img_lazyload.js'}

//file use_img_lazyload.js

///<reference path="jquery-1.7.2.js" />
function checkbrowse() {
   var ua = navigator.userAgent.toLowerCase();
   var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
   var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
   var v = (ua.match(new RegExp(r)) || [])[1];
   jQuery.browser.msie = is;
   jQuery.browser.version = v;
   return {  
       'is': jQuery.browser.msie,
       'ver': jQuery.browser.version
   }
}
var public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] <= 8.0)) {
   showeffect = "show"
} else {
   showeffect = "fadeIn"
}
jQuery(document).ready(function ($) {
   $("img").lazyload({
       placeholder: "themes/1hdshop/p_w_picpaths/p_w_picpaths_lazy_bg1.jpg",
       effect: "show",
       failurelimit: 10,  //設為 10 令插件找到 10 個不在可見區域的圖片是才停止搜索. 如果你有一個猥瑣的布局, 請把這個參數設高一點.      

      threshold : 20 ,    //  threshold 為 20 令圖片在距離屏幕 20 像素時提前加載.  
       skip_invisible : false  //加載隱藏圖片
   })
});

以上是“jquery插件如何實現懶漢式加載圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！