图片预加载
对于图片多的网站来说,资源加载特别是图片的加载比较重要。如果图片加载过慢导致网页的渲染慢甚至让http请求超时,这会直接导致用户的体验较差,让人明显觉得网页卡。
因此需要将图片进行预加载,这样网页显示的时候就不会有很明显的停顿、卡着的感觉。
思路是当图片加载时,先创建一个图片对象,等图片对象完全加载完时出发图片的的onload函数,在onload函数里面触发图片加载完后的当作函数。这样当图片显示时速度会比较快,就可以达到让人觉得图片加载速度快。
ie、opera下,当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。在ie,opera下,对于缓存图片的初始状态,与firefox和safari,chrome下是不一样的,但是对onload事件的触发,却是一致的,不管是什么浏览器。代码如下:
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.onload = function(){//图片完全加载完后
img.onload = null;
callback(img);
}
img.src = url;
}