有時(shí)候一個(gè)網(wǎng)頁(yè)會(huì)包含很多的圖片莉御，例如淘寶京東這些購(gòu)物網(wǎng)站撇吞，商品圖片多只之又多，頁(yè)面圖片多礁叔，加載的圖片就多牍颈。服務(wù)器壓力就會(huì)很大。不僅影響渲染速度還會(huì)浪費(fèi)帶寬琅关。比如一個(gè)1M大小的圖片煮岁，并發(fā)情況下，達(dá)到1000并發(fā)涣易，即同時(shí)有1000個(gè)人訪問(wèn)画机，就會(huì)產(chǎn)生1個(gè)G的帶寬。
為了解決以上問(wèn)題新症，提高用戶體驗(yàn)步氏，就出現(xiàn)了懶加載方式來(lái)減輕服務(wù)器的壓力，優(yōu)先加載可視區(qū)域的內(nèi)容徒爹，其他部分等進(jìn)入了可視區(qū)域再加載荚醒，從而提高性能。
vue項(xiàng)目中的打包隆嗅，是把html界阁、css、js進(jìn)行打包胖喳，還有圖片壓縮泡躯。但是打包時(shí)把css和js都分成了幾部分，這樣就不至于一個(gè)css和就是文件非常大。也是優(yōu)化性能的一種方式精续。
效果動(dòng)圖如下：
[示例圖片]https://img-blog.csdnimg.cn/20190524171929234.gif
1.懶加載原理
一張圖片就是一個(gè)<img>標(biāo)簽坝锰，瀏覽器是否發(fā)起請(qǐng)求圖片是根據(jù)<img>的src屬性，所以實(shí)現(xiàn)懶加載的關(guān)鍵就是重付，在圖片沒(méi)有進(jìn)入可視區(qū)域時(shí)顷级，先不給<img>的src賦值，這樣瀏覽器就不會(huì)發(fā)送請(qǐng)求了确垫，等到圖片進(jìn)入可視區(qū)域再給src賦值弓颈。
2.懶加載思路及實(shí)現(xiàn)
實(shí)現(xiàn)懶加載有四個(gè)步驟，如下：
1.加載loading圖片
2.判斷哪些圖片要加載【重點(diǎn)】
3.隱形加載圖片
4.替換真圖片
1.加載loading圖片是在html部分就實(shí)現(xiàn)的删掀，代碼如下：
示例圖片
2.如何判斷圖片進(jìn)入可視區(qū)域是關(guān)鍵翔冀。
示例圖片
如上圖所示，讓在瀏覽器可視區(qū)域的圖片顯示披泪，可視區(qū)域外的不顯示纤子，所以當(dāng)圖片距離頂部的距離top-height等于可視區(qū)域h和滾動(dòng)區(qū)域高度s之和時(shí)說(shuō)明圖片馬上就要進(jìn)入可視區(qū)了，就是說(shuō)當(dāng)top-height<=s+h時(shí)款票，圖片在可視區(qū)控硼。
這里介紹下幾個(gè)API函數(shù)：
頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth;
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight;
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop;
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft;
網(wǎng)頁(yè)正文部分上： window.screenTop;
網(wǎng)頁(yè)正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
HTMLElement.offsetTop 為只讀屬性，它返回當(dāng)前元素相對(duì)于其 offsetParent 元素的頂部的距離艾少。
window.innerHeight：瀏覽器窗口的視口（viewport）高度（以像素為單位）卡乾；如果有水平滾動(dòng)條，也包括滾動(dòng)條高度缚够。
具體實(shí)現(xiàn)的js代碼為：
``// onload是等所有的資源文件加載完畢以后再綁定事件
window.onload = function(){
// 獲取圖片列表幔妨，即img標(biāo)簽列表
var imgs = document.querySelectorAll('img');
// 獲取到瀏覽器頂部的距離
function getTop(e){
return e.offsetTop;
}
// 懶加載實(shí)現(xiàn)
function lazyload(imgs){
// 可視區(qū)域高度
var h = window.innerHeight;
//滾動(dòng)區(qū)域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//圖片距離頂部的距離大于可視區(qū)域和滾動(dòng)區(qū)域之和時(shí)懶加載
if ((h+s)>getTop(imgs[i])) {
// 真實(shí)情況是頁(yè)面開(kāi)始有2秒空白，所以使用setTimeout定時(shí)2s
(function(i){
setTimeout(function(){
// 不加立即執(zhí)行函數(shù)i會(huì)等于9
// 隱形加載圖片或其他資源谍椅，
//創(chuàng)建一個(gè)臨時(shí)圖片误堡，這個(gè)圖片在內(nèi)存中不會(huì)到頁(yè)面上去。實(shí)現(xiàn)隱形加載
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只會(huì)請(qǐng)求一次
// onload判斷圖片加載完畢雏吭，真是圖片加載完畢埂伦，再賦值給dom節(jié)點(diǎn)
temp.onload = function(){
// 獲取自定義屬性data-src，用真圖片替換假圖片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滾屏函數(shù)
window.onscroll =function(){
lazyload(imgs);
}
}``
本文章轉(zhuǎn)載與https://blog.csdn.net/w1418899532/article/details/90515969
