ホームページ > 記事 > ウェブフロントエンド > jqueryに基づいた画像の遅延読み込みjs
以下は実装コードです (jquery に基づいています):
function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img"); var pageTop=function(){ return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight; }; var imgLoad=function(){ defObj.each(function(){ if ($(this).offset().top<=pageTop()){ var src2=$(this).attr("src2"); if (src2){ $(this).attr("src",src2).removeAttr("src2"); } } }); }; imgLoad(); // 绑定滚动事件 $(window).bind("scroll",function(){ imgLoad(); }); } lazyload({ defObj:"#plist" })
jquery ベースの画像遅延読み込み js 関連記事の詳細については、PHP 中国語 Web サイトに注目してください。