图片预加载小记
2011-07-13 00:04
351 查看
今天稍微看了下图片预加载的运用,相关的技术文章google一下有很多,自己也记录一下,方便以后自己查看.
做个小例子,效果如下:
![](http://pic002.cnblogs.com/images/2011/139258/2011071300003661.png)
代码如下,比较简单
代码不多很简单.
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图片预加载技术,感觉写的不错在此留个记号. 但是里面有个注释有点小问题,这个问题也是通过朋友指点才明白的,其中有段代码如下:
要说明的是,其实img.complete是否为true和缓存没关系,事实上每次打开页面图片总要经过load的过程,complete状态才会变true,有没有缓存只能 说明浏览器是从网络加载还是从缓存加载图片....所以这里的注释有所误导, 代码本身的逻辑是没问题的.
最后欢迎大家留言谈论,共同进步
做个小例子,效果如下:
![](http://pic002.cnblogs.com/images/2011/139258/2011071300003661.png)
代码如下,比较简单
.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,有没有缓存只能 说明浏览器是从网络加载还是从缓存加载图片....所以这里的注释有所误导, 代码本身的逻辑是没问题的.
最后欢迎大家留言谈论,共同进步
相关文章推荐
- 【原创】开源中国阅读小记 - 3 - TableCell图片异步加载
- 图片预加载插件开发小记
- 小记-picasso图片加载不显示
- pickview加载图片和声音
- ImageView下载图片加载
- 关于图片预加载loading及加载失败的相关问题
- Android 利用多线程异步加载图,并把图片处理成圆角,并更新视图
- jquery 图片延迟加载插件
- Android 使用三级缓存实现对图片的加载
- 使用RecyclerView加载网络图片时出现no adapter attached skipping layout
- Java web开发加载图片路径的两种方式
- Anroid高效显示Bitmap图片,减少OOM问题,加载大尺寸位图
- **Android_开源框架_AndroidUniversalImageLoader网络图片加载**
- 图片预加载
- cocos2dx-图片加载内存
- ListView滚动时加载图片(只加载当前屏幕图片)
- android加载长图片出现Bitmap too large to be uploaded into a texture的解决方案
- 【Android解决HTMI加载图片错位,重叠imageloader】
- 加载大图片报OOM错误
- 样式化加载失败的图片