1.什么是懶加載？
懶加載也就是延遲加載。
當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為同一張圖片的路徑（這樣就只需請(qǐng)求一次，俗稱占位圖），只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片正真的路徑，讓圖片顯示出來(lái)。這就是圖片懶加載。
demo:
//所有img元素的src屬性值是同一個(gè)圖片地址，自定義屬性data-src里存儲(chǔ)的是真正需要加載的圖面地址，當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，再把data-src的屬性值賦值給對(duì)應(yīng)的img元素的src屬性
<ul class="warp">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
2.為什么要使用懶加載?
很多頁(yè)面，內(nèi)容很豐富，頁(yè)面很長(zhǎng)，圖片較多。比如說(shuō)各種商城頁(yè)面。這些頁(yè)面圖片數(shù)量多，而且比較大，少說(shuō)百來(lái)K，多則上兆。要是頁(yè)面載入就一次性加載完畢，會(huì)花費(fèi)很多不必要的時(shí)間。
3.懶加載的原理是什么?
頁(yè)面中的img元素，如果沒(méi)有src屬性，瀏覽器就不會(huì)發(fā)出請(qǐng)求去下載圖片，只有通過(guò)javascript設(shè)置了圖片路徑，瀏覽器才會(huì)發(fā)送請(qǐng)求。
懶加載的原理就是先在頁(yè)面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把正真的路徑存在元素的自定義屬性“data-src”（這個(gè)名字起個(gè)自己認(rèn)識(shí)好記的就行）里，要用的時(shí)候就取出來(lái)，再設(shè)置。
4.懶加載的實(shí)現(xiàn)步驟?
首先我們來(lái)看一張圖：
Paste_Image.png
滾動(dòng)滑動(dòng)的垂直距離:
var scrollTop = $(window).scrollTop();
窗口的高度：
var windowHeight = $(window).height();
元素到頁(yè)面頂部的高度：
var offsetTop = $img.offset().top;
由圖片可知：當(dāng)offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,這時(shí)圖片元素才在我們的可視窗口
懶加載步驟：
1)首先，不要將圖片地址放到src屬性中，而是放到自定義屬性data-src中。
2)頁(yè)面加載完成后，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)，如果在，則將data-original屬性中的值取出存放到src屬性中。
3)在滾動(dòng)事件中重復(fù)判斷圖片是否進(jìn)入視野，如果進(jìn)入，則將data-src屬性中的值取出存放到src屬性中。
5.懶加載的優(yōu)點(diǎn)是什么?
頁(yè)面加載速度快，減少內(nèi)存占用，減輕了服務(wù)器的壓力，節(jié)約了流量,用戶體驗(yàn)好
懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。
6.實(shí)現(xiàn)圖片懶加載代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
list-style:none;
}
.container{
width: 600px;
margin: 0 auto;
}
.container li{
float: left;
margin: 10px 10px;
}
.container li img{
width: 240px;
height: 180px;
}
p{
float: left;
}
</style>
</head>
<body>
<ul class="container clearfix">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
/*
1.對(duì)于所有的img標(biāo)簽，把真實(shí)的地址放入自定義屬性data-img
2.當(dāng)滾動(dòng)頁(yè)面時(shí)，檢查頁(yè)面所有的img標(biāo)簽，看看這個(gè)標(biāo)簽是否出現(xiàn)到我們的視野，當(dāng)出現(xiàn)在我們的視野時(shí)
再去判斷它是否已經(jīng)加載過(guò)，如果沒(méi)有加載，加載它
*/
// 用戶第一次打開(kāi)頁(yè)面，還未滾動(dòng)窗口的時(shí)候需要執(zhí)行一次 lazyRender
lazyRender();
var clock;
$(window).on('scroll',function(){
//用戶鼠標(biāo)滾輪滾動(dòng)一次，有多次事件響應(yīng)。下面的 setTimeout 主要是為性能考慮，只在最后一次事件響應(yīng)的時(shí)候執(zhí)行 lazyRender
if(clock){
clearTimeout(clock)
}
clock = setTimeout(function(){
lazyRender();
}, 300)
})
function lazyRender() {
$('.container img').each(function(){
if( checkShow($(this)) && !isLoaded($(this)) ){
loadImg($(this))
}
})
}
//判斷在沒(méi)在可視窗口
function checkShow($img) {
//滾動(dòng)的高度
var scrollTop = $(window).scrollTop();
//窗口的高度
var windowHeight = $(window).height();
//元素到頁(yè)面頂部的高度
var offsetTop = $img.offset().top;
//offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,這是元素才在我們的可視窗口
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
return true;
}
return false;
}
//判斷加沒(méi)加載過(guò)
function isLoaded($img) {
return $img.attr('data-src') === $img.attr('src')
}
function loadImg($img) {
$img.attr('src',$img.attr('data-src'))
}
</script>
</body>
</html>
