1.什么是懶加載
- 只加載當(dāng)前窗口范圍中的圖片
- 在用戶滾動(dòng)頁面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù)
2.懶加載的特點(diǎn)
- 通過滾動(dòng)獲取到的新的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示
- 加快了網(wǎng)頁響應(yīng)的速度
- 最大程度上減少了服務(wù)器端的資源耗用
3.懶加載步驟
- 拿到圖片數(shù)據(jù)后鹃栽，不要將圖片的地址拼接到圖片的
src屬性中，為其設(shè)置其他的屬性如data-original，來暫存圖片地址 - 獲取屏幕的高度
var screenHeight = $(window).outerHeight();
-
在圖片加載后株茶，獲取到所有圖片的上邊框到
document上邊框的距離this.onload = function () { var $this = $(this); // 圖片距離頂部的值 var imgScrollTop = $this.offset().top; // 判斷是否在屏幕范圍內(nèi)容 if (imgScrollTop < screenHeight) { // 從data-original中取出值蚂夕，并放到src屬性中 $this.attr({ src: $this.attr('data-original') }); } } -
判斷在滾屏中爆价，圖片是否進(jìn)入用戶的視野
window.onscroll=function (){ var srcollValue= screenHeight + $(window).scrollTop(); $('section img').each(function (i, v) { var $this = $(this); // 圖片距離頂部的值 var imgScrollTop = $this.offset().top; if (imgScrollTop <= scrollValue) { $this.attr({ src: $this.attr('data-original') }) } }) }
4.懶加載插件
使用插件應(yīng)提前給圖片設(shè)置高度
