預加載是指在網頁全部加載之前，對一些主要內容進行加載，以提供給用戶更好的體驗，減少等待的時間。

懶加載是一種獨特而又強大的數據獲取方法,它能夠在用戶滾動頁面的時候自動獲取更多的數據,而新得到的數據不會影響原有數據的顯示,同時最大程度上減少服務器端的資源耗用。

下面通過代碼來實現預加載與懶加載的功能。
預加載：
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');
// 圖片預加載
for(var i = 0;i<imgs.length; i++){
var img = new Image();
img.index = i;
img.src = imgs[i].getAttribute('url');
//表示圖片已經加載完成
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')
// 懶加載：什么時候需要，什么時候加載。延遲加載
window.onscroll = function(){
var st = document.documentElement.scrollTop || document.body.scrollTop;
// 當偏移量達到700再進行圖片加載
if (st>700) {
img[2].src = img[0].getAttribute('url');
// img[3].src = img[1].getAttribute('url');
}
}