图片预加载小记

今天稍微看了下图片预加载的运用,相关的技术文章google一下有很多,自己也记录一下,方便以后自己查看.

做个小例子,效果如下:

代码如下,比较简单

.loading {
    background: #E8FFFA url(image/ajax-loader.gif) no-repeat center center;
}

<img id="image" class="loading" src="http://liwenbo200.w227.10te.net/uploads/allimg/091125/10355M3E-3.jpg" alt="large picture" height="200" width="400" />

(function() {
    var img = document.getElementById("image");         
    img.onload = function() {
        // onload事件触发时 image的状态
        console.log('onload:' + this.complete);
        
        setTimeout(function() {
            // image加载完后的状态
            console.log('after onload:' + img.complete);
        }, 1000);
        
        // 简单的去除image的样式
        this.className = '';
    }
    // onload事件触发前 image的状态
    console.log("before load:" + img.complete);
})();

代码不多很简单.

• chrome浏览器,无论是否缓存:before load: false, onload: true, after load: true

• firefox,无缓存的情况:before load: false, onload: true, after load: true

• firefox,有缓存的情况:before load: true, onload: true, after load: true

• IE9,有无缓存跟chrome一致

• IE6~8,我测出来有点奇怪,我用IE9进行模式切换,不管有无缓存, before load: false, onload: false, after load: true. 而且是在image快要加载结束时(还有一小块没加载完)就调用了onload事件,觉得有点奇怪,应该是浏览器实现的bug吧

这里还有一篇动态获取图片尺寸的文章,再谈javascript图片预加载技术,感觉写的不错在此留个记号. 但是里面有个注释有点小问题,这个问题也是通过朋友指点才明白的,其中有段代码如下:

// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
    ready.call(img);
    load && load.call(img);
    return;
};

要说明的是,其实img.complete是否为true和缓存没关系,事实上每次打开页面图片总要经过load的过程,complete状态才会变true,有没有缓存只能 说明浏览器是从网络加载还是从缓存加载图片....所以这里的注释有所误导, 代码本身的逻辑是没问题的.

最后欢迎大家留言谈论,共同进步