預(yù)加載是指在網(wǎng)頁全部加載之前，對一些主要內(nèi)容進(jìn)行加載袒啼，以提供給用戶更好的體驗(yàn)，減少等待的時(shí)間。
懶加載是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法,它能夠在用戶滾動頁面的時(shí)候自動獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示,同時(shí)最大程度上減少服務(wù)器端的資源耗用拱礁。
下面通過代碼來實(shí)現(xiàn)預(yù)加載與懶加載的功能琢锋。
預(yù)加載：
css：img{ width:250px; }
html:
<img url="images/1.jpg" src="" />
<img url="images/2.jpg" src="" />
<img url="images/3.jpg" src="" />
<img url="images/4.jpg" src="" />
JS:
// 獲取元素
var imgs = document.getElementsByTagName('img');
// 圖片預(yù)加載
for(var i = 0;i<imgs.length; i++){
var img = new Image();
img.index = i;
img.src = imgs[i].getAttribute('url');
//表示圖片已經(jīng)加載完成
img.onload = function(){
imgs[this.index].src = imgs[this.index].getAttribute('url');
}
}
懶加載：
css：img{ width: 500px;display: block; }
html：
<img src="" url="images/3.jpg">
<img src="" url="images/4.jpg">
JS：
// 獲取圖片
var imgs = document.getElementsByTagName('img')
// 懶加載：什么時(shí)候需要，什么時(shí)候加載呢灶。延遲加載
window.onscroll = function(){
var st = document.documentElement.scrollTop || document.body.scrollTop;
// 當(dāng)偏移量達(dá)到700再進(jìn)行圖片加載
if (st>700) {
img[2].src = img[0].getAttribute('url');
// img[3].src = img[1].getAttribute('url');
}
}
