作用: 保證頁面打開的速度(3s之內(nèi)如果首頁打不開跺讯，就已經(jīng)算是死亡頁面了)棕洋。
原理:
- 對于首屏幕中的圖片: 首先給對應(yīng)的區(qū)域一張默認(rèn)圖片占的位置(默認(rèn)圖需要非常的小，一般維持在5kb內(nèi))咒程，當(dāng)首屏內(nèi)容都加載完成后啡直，才開始加載真實的圖片，或者也可以給一個延遲的時間镀脂。
- 對于其他屏幕的圖片: 也是給一張默認(rèn)的圖片占位牺蹄，當(dāng)滾動條滾動到對應(yīng)區(qū)域的時候，再開始加載真實的圖片
拓展: 數(shù)據(jù)的異步加載薄翅，開始只把前兩屏幕的數(shù)據(jù)加載綁定出來沙兰，后面的數(shù)據(jù)不進(jìn)行處理，當(dāng)頁面滾動到對應(yīng)區(qū)域時翘魄，再重新請求數(shù)據(jù)鼎天，然后再綁定渲染數(shù)據(jù)。
步驟
- 給需要懶加載的圖片外層放置一個容器暑竟。給
img標(biāo)簽通過display:none;隱藏斋射。然后給外層的容器讓一個大小很小的背景圖。給img標(biāo)簽上設(shè)置一個自定義屬性但荤，用于存放圖片的真實地址罗岖。
HTML
<div class="banner">
<!--trueImg是當(dāng)前IMG標(biāo)簽的自定義屬性，存儲的是真實圖片地址-->
<img src="" alt="#" trueImg="img/jd.jpg">
</div>
CSS
.banner {
margin: 10px auto;
width: 350px;
height: 200px;
border: 1px solid green;
background: url("../img/default.gif") no-repeat center center #e1e1e1; /*給當(dāng)前的區(qū)域加一個默認(rèn)圖占位腹躁，告訴用戶此處圖片正在加載中*/
}
.banner img {
display: none; /*在開始的時候桑包，img的src屬性沒有地址，這樣的話在IE瀏覽器中纺非，容器中會顯示一張碎圖哑了，不美觀，所以讓其隱藏铐炫；當(dāng)真實的圖片加載完成后再顯示*/
width: 100%;
height: 100%;
}
- 使用JavaScript實現(xiàn)圖片懶加載±菔郑現(xiàn)在是模擬情況，所以用一個延時定時器來使得圖片延遲加載倒信。還要考慮到如果
img標(biāo)簽內(nèi)地址設(shè)置錯誤科贬，避免出現(xiàn)叉圖的影響視覺的效果。所以使用new Image()來暫時存放一個圖片。并使用其onload方法判斷圖片是否加載成功：
var banner = document.querySelector('.banner');
var imgFir = banner.getElementsByTagName('img')[0];
window.setTimeout(function () {
// imgFir.src = imgFir.getAttribute('trueImg');
// imgFir.style.display = 'block';
// -> 以上處理還是不完整的: 如果獲取的真實圖片的地址是錯誤的榜掌，當(dāng)賦值給IMG的src屬性的時候优妙，不僅控制臺會報錯，而且頁面中會出現(xiàn)碎圖憎账，或者?圖套硼，影響實際視覺效果
// -> 獲取圖片的地址，驗證地址的有效性胞皱，是有效的才賦值邪意，不是有效的不進(jìn)行賦值處理
// var oImg = document.createElement('img');
var oImg = new Image(); // 創(chuàng)建一個臨時的img標(biāo)簽
oImg.src = imgFir.getAttribute('trueImg');
oImg.onload = function () { // 當(dāng)圖片能夠正常加載就執(zhí)行
imgFir.src = this.src;
imgFir.style.display = 'block';
oImg = null;
console.log('圖片加載完成...');
var now = new Date();
}
//console.log('圖片正在加載中...');
var time = new Date();
}, 500);
