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 中会出错。**
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
