定義
圖片懶加載又稱圖片延時(shí)加載、惰性加載，即在用戶需要使用圖片的時(shí)候加載，這樣可以減少請(qǐng)求，節(jié)省帶寬，提高頁(yè)面加載速度，相對(duì)的，也能減少服務(wù)器壓力。
惰性加載是程序人性化的一種體現(xiàn)，提高用戶體驗(yàn)，防止一次性加載大量數(shù)據(jù)，而是根據(jù)用戶需要進(jìn)行資源的請(qǐng)求。
實(shí)現(xiàn)
懶加載的難點(diǎn)在于確定某張圖片是否是用戶需要的資源，在瀏覽器中，用戶需要的是可視區(qū)內(nèi)的資源，因此我們只需要判斷圖片是否已經(jīng)呈現(xiàn)在可視區(qū)內(nèi)，當(dāng)圖片呈現(xiàn)在可視區(qū)內(nèi)時(shí)，獲取圖片的真實(shí)地址并賦給該圖片即可(圖片寬高需要指定，可以利用padding處理)。
判斷是否存在于可視區(qū)
瀏覽器視口高度
待加載資源距離視口頂端位置
通過以上兩點(diǎn)即可判斷圖片是否位于可視區(qū)內(nèi)。
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')}之后獲取圖片的真實(shí)地址
<img src="loading.gif" var src = elem.dataset.src;</script>
把真實(shí)地址賦給圖片
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); } };};總結(jié)
以上所述是小編給大家介紹的前端圖片懶加載(lazyload)的實(shí)現(xiàn)方法(提高用戶體驗(yàn))，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
