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('plete = ' + plete);var body = document.querySelector('body');body.appendChild(img);};window.onload = show;</script></body>以上代码在safari浏览器,FF浏览器中的弹出顺序为：alert("img is loaded")alert("body is loaded");alert('plete = *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 中会出错。**
