懶加載
1.什麼是懶加載
懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。使用者滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載将使網頁加載更快。在某些情況下，它還可以幫助減少伺服器負載。常适用圖檔很多，頁面很長的電商網站場景中。
2.為什麼要用懶加載
能提升使用者的體驗，不妨設想下，使用者打開像手機淘寶長頁面的時候，如果頁面上所有的圖檔都需要加載，由于圖檔數目較大，等待時間很長，使用者難免會心生抱怨，這就嚴重影響使用者體驗。
減少無效資源的加載，這樣能明顯減少了伺服器的壓力和流量，也能夠減小浏覽器的負擔。
防止并發加載的資源過多會阻塞js的加載，影響網站的正常使用。
3.懶加載的原理
首先将頁面上的圖檔的 src 屬性設為空字元串，而圖檔的真實路徑則設定在data-original屬性中， 當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖檔是否進入可視區域,如果圖檔在可視區内将圖檔的 src 屬性設定為data-original 的值，這樣就可以實作延遲加載。
4.懶加載實作步驟
<html lang="en"> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style>
.image-item {
display: block;
margin-bottom: 50px;
height: 200px;//一定記得設定圖檔高度
}
</style> </head> <body> <img src="" class="image-item" lazyload="true" data-original="images/1.png"/> <img src="" class="image-item" lazyload="true" data-original="images/2.png"/> <img src="" class="image-item" lazyload="true" data-original="images/3.png"/> <img src="" class="image-item" lazyload="true" data-original="images/4.png"/> <img src="" class="image-item" lazyload="true" data-original="images/5.png"/> <img src="" class="image-item" lazyload="true" data-original="images/6.png"/> <img src="" class="image-item" lazyload="true" data-original="images/7.png"/> <img src="" class="image-item" lazyload="true" data-original="images/8.png"/> <img src="" class="image-item" lazyload="true" data-original="images/9.png"/> <img src="" class="image-item" lazyload="true" data-original="images/10.png"/> <img src="" class="image-item" lazyload="true" data-original="images/11.png"/> <img src="" class="image-item" lazyload="true" data-original="images/12.png"/> <script>
var viewHeight =document.documentElement.clientHeight//擷取可視區高度
function lazyload(){
var eles=document.querySelectorAll（'img[data-original][lazyload]'）
Array.prototype.forEach.call(eles,function(item,index){
var rect
if(item.dataset.original==="")
return
rect=item.getBoundingClientRect()// 用于獲得頁面中某個元素的左，上，右和下分别相對浏覽器視窗的位置
if(rect.bottom>=0 && rect.top < viewHeight){
!function(){
var img=new Image()
img.src=item.dataset.url
img.onload=function(){
item.src=img.src
}
item.removeAttribute（"data-original"）//移除屬性，下次不再周遊
item.removeAttribute（"lazyload"）
}()
}
})
}
lazyload()//剛開始還沒滾動螢幕時，要先觸發一次函數，初始化首頁的頁面圖檔
document.addEventListener（"scroll"，lazyload)
</script> </body> </html> 參考文章
![牛客java選擇題每日打卡Day27[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)