定義
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節省帶寬，提高頁面加載速度，相對的，也能減少服務器壓力。
惰性加載是程序人性化的一種體現，提高用戶體驗，防止一次性加載大量數據，而是根據用戶需要進行資源的請求。
實現
懶加載的難點在于確定某張圖片是否是用戶需要的資源，在瀏覽器中，用戶需要的是可視區內的資源，因此我們只需要判斷圖片是否已經呈現在可視區內，當圖片呈現在可視區內時，獲取圖片的真實地址并賦給該圖片即可(圖片寬高需要指定，可以利用padding處理)。
判斷是否存在于可視區
瀏覽器視口高度
待加載資源距離視口頂端位置
通過以上兩點即可判斷圖片是否位于可視區內。
var nodes = document.querySelectorAll('img[data-src]'), elem = nodes[0], rect = elem.getBoundingClientRect(), vpHeight = document.documentElement.clientHeight;if(rect.top < vpHeight && rect.bottom>=0) { console.log('show')}之后獲取圖片的真實地址
<img src="loading.gif" alt="" data-src="1.gif">...<script data-filtered="filtered"> var src = elem.dataset.src;</script>
把真實地址賦給圖片
var img = new Image();img.onload = function(){ elem.src = img.src;}img.src = src;完整代碼
var scrollElement = document.querySelector('.page'), viewH = document.documentElement.clientHeight;function lazyload(){ var nodes = document.querySelectorAll('img[data-src]'); Array.prototype.forEach.call(nodes,function(item,index){ var rect; if(item.dataset.src==='') return; rect = item.getBoundingClientRect(); if(rect.bottom>=0 && rect.top < viewH){ (function(item){ var img = new Image(); img.onload = function(){ item.src = img.src; } img.src = item.dataset.src item.dataset.src = '' })(item) } })}lazyload();scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));function throttle(fun, delay, time) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; } else { timeout = setTimeout(fun, delay); } };};總結
以上所述是小編給大家介紹的前端圖片懶加載(lazyload)的實現方法(提高用戶體驗)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
