js的 new image()
发布日期:2021-09-25 17:30:20
浏览次数:2
分类:技术文章
本文共 1290 字,大约阅读时间需要 4 分钟。
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。 图像对象: 建立图像对象:图像对象名称=new Image([宽度],[高度]) 图像对象的属性: border complete height hspace lowsrc name src vspace width 图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload 需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。 参考代码:var img=new Image(); img.οnlοad=function(){alert("img is loaded")}; img.οnerrοr=function(){alert("error!")}; img.src="http://www.abaonet.com/img.gif"; function show(){alert("body is loaded");}; window.οnlοad=show;运行上面的代码后,在不同的浏览器中进行测试,发现IE和FF是有区别的,在FF中,img 对象的加载包含在body的加载过程中,既是 img加载完之后,body 才算是加载完毕;触发 window.onload 事件,在IE中,img对象的加载是不包含在body的加载过程之中的,body加载完毕,window.onload 事件触发时,img对象可能还未加载结束,img.onload事件会在window.onload之后触发。 根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF 下会影响网页的下载速度。当然如果你在window.onload之后,执行预加载函数,就不会有FF中的问题了。 可以通过Image对象的complete 属性来检测图像是否加载完成(每个Image对象都有一个complete属性,当图像处于装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束(不管成没成功),此时complete属性为true)
var img = new Image(); img.src = oImg[0].src = this.src.replace(/small/,"big"); oDiv.style.display = "block"; img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"});
注:
ie 火狐等大众浏览器均支持 Image对象的onload事件。 ie8及以下、opera 不支持onerror事件转载地址:https://blog.csdn.net/cui_shuang_xi/article/details/24690117 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月24日 04时42分52秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【Unity3D】Unity3D 鼠标射线点击,UI出现在鼠标点击的位置
2019-04-27
【Astart寻路插件】Unity3d 寻路插件A*Pathfinding学习与研究
2019-04-27
【EasyAR】Unity3D EasyAR开发案例系列教程
2019-04-27
【Unity3D】Unity3D 场景的淡入淡出效果实现
2019-04-27
【Unity3D】Unity3D 手势控制模型放大缩小
2019-04-27
【Unity3D】Unity3D 核心类型一览
2019-04-27
【Unity3D】Unity3D UGUI原理分析
2019-04-27
【Unity3D】Unity3D 资源管理整理
2019-04-27
【Unity3D】Unity3D 几个让你相见恨晚的小技巧
2019-04-27
【云服务器】如何搭建自己的百度云服务器?
2019-04-27
【Unity3D】 Photon多人游戏开发教程
2019-04-27
【Unity3D】项目防破解,安全守护,保护项目经验分享
2019-04-27
Python 基础(二十一):argparse 模块
2019-04-27
Python 基础(二十二):正则表达式
2019-04-27
Python 进阶(一):多线程
2019-04-27
Python 进阶(二):多进程
2019-04-27
Python 进阶(三):邮件的发送与收取
2019-04-27
Python 进阶(四):数据库操作之 MySQL
2019-04-27
Python 进阶(五):数据库操作之 SQLite
2019-04-27