什么是懶加載
對(duì)于用戶暫時(shí)不需要的數(shù)據(jù)，不在頁(yè)面打開的時(shí)候就去發(fā)送請(qǐng)求，設(shè)置一個(gè)條件，當(dāng)用戶觸發(fā)條件的時(shí)候再去加載它，這樣做的好處不言而喻，防止頁(yè)面一次性向服務(wù)器響應(yīng)大量請(qǐng)求導(dǎo)致服務(wù)器響應(yīng)慢，頁(yè)面卡頓或崩潰等問(wèn)題，優(yōu)化了用戶的體驗(yàn)。舉例來(lái)說(shuō)，用戶搜索圖片，點(diǎn)開一個(gè)頁(yè)面，用戶也許只是單純的想看看有沒(méi)有合適的，如果沒(méi)有就關(guān)掉頁(yè)面了，而頁(yè)面中有幾百?gòu)垐D片，如果只是單純的img標(biāo)簽，瀏覽器在加載的時(shí)候會(huì)同時(shí)請(qǐng)求這幾百?gòu)垐D片，頁(yè)面卡死一段時(shí)間，用了不少的流量加載出來(lái) ，這對(duì)用戶來(lái)說(shuō)體驗(yàn)是很差的，所以，我們需要用到懶加載。
舉個(gè)例子
圖片懶加載思路：
- 對(duì)于所有的標(biāo)簽，設(shè)置一個(gè)自定義屬性，將
src放入自定義屬性中 - 當(dāng)頁(yè)面滾動(dòng)時(shí)，如果
img出現(xiàn)在窗口且沒(méi)有加載，那就是加載它
知道思路之后，我們可以動(dòng)手來(lái)實(shí)現(xiàn)一下這個(gè)效果，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picture lozy loading</title>
<style>
.window{
height: 2000px;
background: #f1f1f1;
}
.pics{
width: 500px;
margin: 0 auto;
border: 3px solid #ccc;
border-radius: 5px;
text-align: center;
}
.pics img{
width: 00px;
height: 500px;
margin: 10px 0;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="window"></div>
<div class="pics">
<img src="" alt="" data-src="http://i01.pic.sogou.com/cb4e9c56b6407929">
<img src="" alt="" data-src="http://i04.pic.sogou.com/24475ce890affd74">
<img src="" alt="" data-src="http://i03.pic.sogou.com/754215842d2e7b8f">
<img src="" alt="" data-src="http://i04.pic.sogou.com/fefe1127a428d5d7">
<img src="" alt="" data-src="http://i02.pic.sogou.com/fd9caa216e10cbfd">
<img src="" alt="" data-src="http://i02.pic.sogou.com/6f0856038af8fed8">
<img src="" alt="" data-src="http://i01.pic.sogou.com/cf403ec86cabcf5a">
<img src="" alt="" data-src="http://i04.pic.sogou.com/f34c9343648a299e">
<img src="" alt="" data-src="http://i01.pic.sogou.com/3be4b0564a82b91b">
<img src="" alt="" data-src="http://i02.pic.sogou.com/3cd9b64594f071d0">
</div>
</body>
</html>
如上代碼，我們的頁(yè)面中兩個(gè)DIV, 第一個(gè)設(shè)置高度為2000px，用于撐起頁(yè)面，撐出滾動(dòng)條，第二個(gè)DIV里面放置了10張圖片，圖片有一個(gè)自定義屬性data-src，里面放置圖片的src，我們需要實(shí)現(xiàn)的功能是，當(dāng)Img出現(xiàn)在窗口，我們就去加載它，引入jQuery，這里我們用jQuery來(lái)實(shí)現(xiàn)。
<script>
$(window).on('scroll',function (){
$('.pics img').each(function (){
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this))
}
})
})
function checkShow($img){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $img.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
function isLoaded($img){
return $img.attr('src') === $img.attr('data-src')
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
}
</script>
js腳本如上，給window添加一個(gè)scroll事件，按照思路，當(dāng)頁(yè)面滾動(dòng)時(shí)，如果img出現(xiàn)在窗口且沒(méi)有加載，那就是加載它，定義三個(gè)函數(shù)（checkShow,isLoaded,loadImg）；
首先判斷圖片是否出現(xiàn)在窗口。
首先判斷圖片是否在窗口，獲取需要用到的條件：
- 獲取滾動(dòng)條的滾動(dòng)距離
- 獲取窗口的高度
- 獲取img的當(dāng)前位置
如下圖所示，如果img的當(dāng)前位置大于滾動(dòng)條的滾動(dòng)距離并且小于窗口的高度加上滾動(dòng)條滾動(dòng)的距離，那么，說(shuō)明圖片已經(jīng)出現(xiàn)在可視口
寫個(gè)判斷，如果img的當(dāng)前位置大于滾動(dòng)條的滾動(dòng)距離并且小于窗口的高度加上滾動(dòng)條滾動(dòng)的距離的話就return true，反之則false；
加載圖片既是將圖片的data-src賦值給src屬性；
判斷圖片是否加載，即判斷img的src是否等于data-src，將結(jié)果返回出去，你也可以在加載圖片的時(shí)候給圖片添加一個(gè)自定義的屬性，然后判斷圖片是否有該屬性，這樣的思路也可以，這樣的話一個(gè)懶加載就實(shí)現(xiàn)了。
性能優(yōu)化
代碼寫完之后我們來(lái)看一下，首先打開頁(yè)面，發(fā)現(xiàn)什么都沒(méi)有，有的瀏覽器會(huì)顯示一個(gè)紅x，因?yàn)槲覀儧](méi)有設(shè)置img的src屬性，所以會(huì)導(dǎo)致這種場(chǎng)景，我們可以找一張白圖或者一張loading圖，將所有的圖片的src先設(shè)置成它，這樣瀏覽器只會(huì)發(fā)一次圖片請(qǐng)求，對(duì)性能沒(méi)有影響，解決了這個(gè)問(wèn)題我們?cè)俳又?，如果打開頁(yè)面的時(shí)候不滾動(dòng)，那么圖片就不會(huì)加載，如果沒(méi)有之前的DIV撐起滾動(dòng)條，那么圖片就不會(huì)顯示我們想要的效果，所以，我們需要在頁(yè)面打開的時(shí)候就做一次判斷，執(zhí)行一次遍歷，將遍歷函數(shù)封裝一下，然后執(zhí)行，順便將滾動(dòng)事件的函數(shù)替換成函數(shù)名，減少代碼；
接著對(duì)性能做一下測(cè)試，在滾動(dòng)的時(shí)候console.log("hello")，打開頁(yè)面輕輕滾動(dòng)一下，可以發(fā)現(xiàn)控制臺(tái)輸出10個(gè)hello，這說(shuō)明滾動(dòng)一下函數(shù)被執(zhí)行了10次，也就是做了十次的遍歷以及判斷，如果數(shù)據(jù)過(guò)于龐大的話，每次用戶滾動(dòng)窗口，會(huì)讓瀏覽器出現(xiàn)卡頓，因此，我們還可以用定時(shí)器來(lái)優(yōu)化一下我們的代碼，var一個(gè)clock,在用戶滾動(dòng)的時(shí)候判斷，如果clock已經(jīng)存在，就不再設(shè)置這個(gè)定時(shí)器，將clock寫成一個(gè)定時(shí)器，400毫秒之后執(zhí)行我們封裝好的遍歷函數(shù)lazyRender，這樣，用戶在滾動(dòng)窗口的時(shí)候就不會(huì)重復(fù)觸發(fā)了，在滾動(dòng)窗口400毫秒之后才會(huì)觸發(fā)一次遍歷，對(duì)性能做了一下優(yōu)化。優(yōu)化后的代碼如下：
<script>
lazyRender()
var clock
$(window).on('scroll',function (){
if(clock){
clearTimeout(clock)
}
clock = setTimeout(function (){
lazyRender()
},400)
})
function lazyRender(){
$('.pics img').each(function (){
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this))
}
})
}
function checkShow($img){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $img.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
function isLoaded($img){
return $img.attr('src') === $img.attr('data-src')
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
}
</script>
舉一反三
其實(shí)懶加載并不只適用于以上場(chǎng)景，任何對(duì)于用戶暫時(shí)不需要的數(shù)據(jù)，都可以用到懶加載，不在頁(yè)面打開的時(shí)候就去發(fā)送請(qǐng)求，而是設(shè)置一個(gè)條件，當(dāng)用戶需要的時(shí)候觸發(fā)條件再去加載它。
