什么是懶加載
懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)，?懶加載也叫延遲加載，延遲加載圖片或符合某些條件時(shí)才加載某些圖片。
懶加載的原理
只有img標(biāo)簽中的src寫入了圖片的地址，加載頁(yè)面時(shí)才會(huì)請(qǐng)求圖片，所以使用懶加載時(shí)在src中并不寫入任何地址，把圖片的真實(shí)地址放到data- (標(biāo)簽內(nèi)部屬性可存數(shù)據(jù))屬性中，在js中綁定鼠標(biāo)滾動(dòng)事件，其回調(diào)中遍歷所有圖片并作出判斷，將出現(xiàn)在視口中的圖片的 'data-' 屬性保存的地址放到 'src' 中即可。
HTML
<h1>js懶加載</h1>?
?<div class="box">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/1.jpg">
?<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/2.jpg">
?<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/3.jpg">?
?<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/4.jpg">
?<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/5.jpg">?
?<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/6.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/7.jpg">?
?</div>
引入一堆圖片src為空，地址寫在data-original中，onerror表示當(dāng)未加載圖片時(shí)顯示的臨時(shí)加載頁(yè)圖片JavaScript
Script
window.onload = function () { //獲取當(dāng)前瀏覽器的視口高度?
?var viewHeight = document.documentElement.clientHeight; //鼠標(biāo)滾動(dòng)回調(diào)?
?function lazyload() {?
?var img = document.getElementsByClassName('img'); //獲取所有圖片集合 //遍歷圖片集合?
?for (let item of img) { //獲取圖片距視口頂部的距離?
?var imgHeight = item.getBoundingClientRect(); //判斷當(dāng)圖片出現(xiàn)在視口160px時(shí)把地址放到src中，顯示出圖片?
?if (imgHeight.top < (viewHeight - 160)) {?
?item.src = item.getAttribute("data-original")?
? ? ? ? ? ? ?}?
? ? ? ?}?
?}?
?lazyload(); //頁(yè)面加載時(shí)把當(dāng)前視口中的圖片加載進(jìn)來(lái)?
?document.addEventListener('scroll', lazyload);}
