图片预加载

在web开发过程中，经常会有一些网站需要大量显示图片，特别是一些大尺寸的图片，在页面打开后要等一段时间图片才慢慢显示出来，为了获得更好的用户体验，让用户一打开页面无需等待就可以浏览图片，就需要使用图片预加载技术。

JS实现图片预加载

//preload images
if (document.images) {
        var img = new Image();
        img.src = "demo.jpg";
}

如果网页上有很多图片需要预加载，可以将上面的写法封装为一个函数

//preload images
function preloadImg(url){
        if (document.images) {
		var img = new Image();
		img.src = url;
	}
}
preloadImg('images/img1.jpg');
preloadImg('images/img2.jpg');
...

在有些情况下，我们还需要在图片加载完后对图片进行操作，比如放大缩小等，这个时候需要知道图片的大小，可以把上面的方法再扩展一下，加个回调函数

//preload images
function preloadImg(url, callback){
	if (document.images) {
		var img = new Image();
		img.src = url;
		img.onload = function(){ 
			callback.call(img);
	    };
	}
}
//加载完图片调用的函数
function getImgSize(){
	return this.width;
}
preloadImg('images/img1.jpg', getImgSize);

jQuery插件Lazy Load实现图片预加载

具体使用方法请参见Lazy Load Plugin for jQuery

CSS实现图片预加载

将要预加载的图片作为一个隐藏元素的背景图片来加载

#preloader {
background-image: url(images/img1.jpg);
background-image: url(images/img1.jpg);
background-image: url(images/img1.jpg);
width: 0px;
height: 0px;
display: none;
}