图片预加载小记
前文我们有聊到 图片的惰性加载。图片的惰性加载原理其实很简单，将页面中的 img 标签的 src 属性赋值一个占位符地址（如 blank.gif），将图片的真实地址存入该元素的其他属性中（例如 data-original），然后监听 scroll 事件（或者 touchmove），当 img 元素出现在用户可视范围时，将真实的图片地址赋值给 src 元素，即完成图片的惰性加载。
今天要和大家分享的是图片的预加载，预加载主要应用在图片画廊中。举个栗子，打开 百度图片，我们可以通过左右键切换图片，假设图片的播放顺序是 A->B->C，且打开页面时显示 A，我们可以在加载 A 的同时将 B 图同时载入，这样切换图片到 B 时便不用等待，这便是图片的预加载，典型的用 "最初的耗时" 换取 "之后的用户体验"。
图片的预加载有几种实现方式，比如将图片当做 CSS 中的背景图载入，那么要用的时候就可以读取缓存，又比如用 AJAX。业界最常用的办法还是用 Javascript 动态 new Image()，从而发送 HTTP 请求将图片载入到浏览器缓存中。
function preload(url) {
var img = new Image();
img.src = url;
}
preload('images/0.jpg');上面的代码就封装了一个最基本的预加载函数，可以将需要预加载的图片地址当做参数传入，便会发送 HTTP 请求而将该图存入缓存中。
有时候当图片预加载完毕后，我们需要执行一些操作。可以监听 img 的 onload 事件，设置回调：
function preload(url) {
var img = new Image();
img.onload = function() {
alert('loaded!');
};
img.src = url;
}
preload('images/0.jpg');有一些文章指出，当某些浏览器（ie opera）缓存中已经存有某张图，如果再执行 preload 函数，因为不会发送 HTTP 请求，所以不会再触发 onload 事件。楼主实测 ie6-8 并未发现类似问题（没有测试 opera）。
如果有此类问题，也好办，如果某张图已经存在在浏览器的缓存中，其 complete 属性会被置为 true：
var img = new Image();
img.src = 'images/0.jpg';
if (img.complete) {
alert('已经缓存在浏览器中!')
}Read More:
- Javascript图片预加载详解
- javascript图片预加载
- Javascript实现图片的预加载的完整实现