图片懒加载与预加载 javascript图片懒加载与预加载的分析

预加载

常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。

function loadImage(url, callback)
{
　　var img = new Image(); //创建一个Image对象，实现图片的预下载
　　img.src = url;
　　if (img.complete)
　　{ // 如果图片已经存在于浏览器缓存，直接调用回调函数
　　　　callback.call(img);
　　　　return; // 直接返回，不用再处理onload事件
　　}
　　img.onload = function ()
　　{ //图片下载完毕时异步调用callback函数。
　　　　callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来
　　};
}

测试用例：

function imgLoaded()
{
　　alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件

使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。

场景：

如果某一个效果需要更换背景图片，那么图片会临时去加载，这样会出现图片需要一段时间才能显示出来，用户体验就会变差，所以图片需要预加载。比如照片墙，滚动图片什么，需要无缝显示图片的，之前加载好图片才不至于要显示下一张图片的时候临时去拉图片导致显示图片过慢。