js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)


Posted in Javascript onMarch 25, 2011

看个例子:

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> 
<script type="text/javascript"> 
<!-- 
function addImg(isrc) 
{ 
var Img = new Image(); 
Img.src = isrc; 
Img.onload = function () 
{ 
document.body.appendChild(Img); 
} 
} 
//--> 
</script>

当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。

稍微修改下:

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> 
<script type="text/javascript"> 
<!-- 
function addImg(isrc) 
{ 
var Img = new Image(); 
Img.onload = function () 
{ 
document.body.appendChild(Img); 
} 
Img.src = isrc; 
} 
//--> 
</script>

运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!

联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' /> 
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" /> 
<script type="text/javascript"> 
<!-- 
var Img; 
function addImg(isrc) 
{ 
Img = new Image(); 
//Img.src = isrc; 
Img.onload = function () 
{ 
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState) 
document.body.appendChild(Img); 
} 
Img.src = isrc; 
} 
//--> 
</script>

经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,这和IE的 readyState 属性的表现一致!
至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?
众所周知,从缓存里加载东西的速度是很快的,那么在
...
Img.src = isrc;
Img.onload = ...
...
的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?

这回加载一张根本不存在的图片看看效果:

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' /> 
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" /> 
<script type="text/javascript"> 
<!-- 
var Imgttmt; 
function addImg(isrc) 
{ 
Imgttmt = new Image(); 
Imgttmt.src = isrc; 
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState) 
Imgttmt.onload = function () 
{ 
alert("impossible") 
} 
} 
//--> 
</script>

可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;IE的 readyState 始终为uninitialized 。令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!如果换一张从来没有加载过的图片,FF和Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为false, 之后为 true!
测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
基于jquery的3d效果实现代码
Mar 23 #Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 #Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 #Javascript
jquery图片上下tab切换效果
Mar 18 #Javascript
javascript一些实用技巧小结
Mar 18 #Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 #Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
用tensorflow搭建CNN的方法
2018/03/05 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis