js实现图片预加载(js操作Image对象属性complete,事件onload异步加载图片)
2023-06-13 09:14:27 时间
看个例子:
复制代码代码如下:
<inputtype="button"name=""value="载入图片"onclick="addImg("tt.jpg")"/>
<scripttype="text/javascript">
<!--
functionaddImg(isrc)
{
varImg=newImage();
Img.src=isrc;
Img.onload=function()
{
document.body.appendChild(Img);
}
}
//-->
</script>
当包含上述代码的页面打开时并不载入“tt.jpg”,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载“tt.jpg"这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次”onload“事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。
稍微修改下:
<inputtype="button"name=""value="载入图片"onclick="addImg("tt.jpg")"/>
<scripttype="text/javascript">
<!--
functionaddImg(isrc)
{
varImg=newImage();
Img.onload=function()
{
document.body.appendChild(Img);
}
Img.src=isrc;
}
//-->
</script>
运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?由此可以见IE、Opera执行过程中并不是只触发一次onload事件!
联想一下Image对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete])(为防止缓存影响效果请更换图片名称!)
<inputtype="button"name=""value="complete"onclick="alert("complete:"+Img.complete+"\nreadyState:"+Img.readyState)"/>
<inputtype="button"name=""value="载入图片"onclick="addImg("mtm.jpg")"/>
<scripttype="text/javascript">
<!--
varImg;
functionaddImg(isrc)
{
Img=newImage();
//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加载的速度快到,来不及追加事件?
这回加载一张根本不存在的图片看看效果:
<inputtype="button"name=""value="complete"onclick="alert("complete:"+Imgttmt.complete+"\nreadyState:"+Imgttmt.readyState)"/>
<inputtype="button"name=""value="载入图片"onclick="addImg("mtmttyt.jpg")"/>
<scripttype="text/javascript">
<!--
varImgttmt;
functionaddImg(isrc)
{
Imgttmt=newImage();
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,它是在最初newImgttmt()的时候Imgttmt.complete值为false。而之后Imgttmt.complete值就一直为true了!如果换一张从来没有加载过的图片,FF和Chrom的行为就一致了,都是一开始加载时,Imgttmt.complete值为false,之后为true!
测试的过程中还发现,脚本的执行顺序的确会影响到类似于onload等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!基于javascript这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
相关文章
- JS中的几种循环和跳出方式
- js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」
- js剪绳子【剑指offer】
- js实现生肖星座年龄余年计算
- js发送通知
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- JS阻止事件冒泡详解编程语言
- Node.js中使用MySQL事务实现原子性操作(nodemysql事务)
- JS中style属性
- (JS实现)MapBar中坐标的加密和解密的脚本
- js活用事件触发对象动作
- JS创建对象(常见的几种方法)
- JS函数验证总结(方便js客户端输入验证)
- js隔行变色、鼠标划过变色代码
- 友情链接横向文字上下间隙循环滚动JS效果
- js之onload事件的一点使用心得
- js动态设置鼠标事件示例代码
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- JS实现将人民币金额转换为大写的示例代码
- js触发onchange事件的方法说明