图片预加载

    对于图片多的网站来说,资源加载特别是图片的加载比较重要。如果图片加载过慢导致网页的渲染慢甚至让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;
}

posted @ 2014-02-16 21:12  烈火如歌007  阅读(143)  评论(0编辑  收藏  举报