预加载是指在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。

懒加载是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

下面通过代码来实现预加载与懒加载的功能。
预加载：
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');
}
}