對於圖片過多的使用場景,為了提高頁面加載速度,改善用戶體驗,我們對未出現在視野範圍內的圖片先不進行加載,等到出現在視野範圍才去加載。
-它的實作原理很簡單,先把img的src指向一個小圖片,圖片真實的位址儲存在img一個自訂的屬性裡,,等到此圖片出現在視野範圍內了,獲取img元素,把src裡的值賦給src。
function isShow($el){ var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度 if(top < scrollH + winH){ return true;//在可视范围 }else{ return false;//不在可视范围 } }
$(window).on('scroll', function(){//监听滚动事件 checkShow(); }) checkShow(); function checkShow(){//检查元素是否在可视范围内 $('img').each(function(){//遍历每一个元素 var $cur = $(this); if(!!isloaded($cur)){return;}//判断是否已加载 if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300)//设置时间是为了更好的看出效果 }; }); }
function showImg($el){ $el.attr('src', $el.attr('src')); $cur.data('isloaded',true); }
以上是細說jQuery如何實現懶加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!