图片预加载小记

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

做个小例子,效果如下:

代码如下,比较简单

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

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

 1 (function() {
 2     var img = document.getElementById("image");         
 3     img.onload = function() {
 4         // onload事件触发时 image的状态
 5         console.log('onload:' + this.complete);
 6         
 7         setTimeout(function() {
 8             // image加载完后的状态
 9             console.log('after onload:' + img.complete);
10         }, 1000);
11         
12         // 简单的去除image的样式
13         this.className = '';
14     }
15     // onload事件触发前 image的状态
16     console.log("before load:" + img.complete);
17 })();

代码不多很简单.

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图片预加载技术,感觉写的不错在此留个记号. 但是里面有个注释有点小问题,这个问题也是通过朋友指点才明白的,其中有段代码如下:

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

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

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