new Image()

一、Image对象的简介
宿主(或内置)对象：不是由JavaScript语言本身而是由它的运行环境提供的。具体到web运用，这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象。

Image 对象是 JS 中的宿主(或内置)对象，它代表嵌入的图像。当我们创建一个 Image 对象时，就相当于给浏览器缓存了一张图片，Image 对象也常用来做预加载图片（也就是将图片预先加载到浏览器中，当浏览图片的时候就能享受到极快的加载速度）。在HTML页面中，<img> 标签每出现一次，也就创建了一个 Image 对象。

在创建 Image 对象后，如果没有给它的 width 和 height 属性赋值，那它的 width 和 height 的默认值都为0。有可能你会问，我将 Image对象插入到 HTML页面中并且已经显示出来了，那为什么 width 和 height 还是0呢？其实大家都忽略了一个最重要的问题，就是 HTML代码的加载和图片的加载所用的时间。

HTML代码的加载和图片的加载是同时的，虽然图片已经进行过预加载，但是尽管这样加载的速度相比较 HTML 代码的加载速度还是要慢一些的。

因此，就需要用 Image对象中的 onload事件来解决这个问题了。。

二、Image对象应用
创建一个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;

很好的利用这3个事件可以在HTML中实现很多图片的功能

例如：处理图片加载失败情况：<img src="image/1.jpg" width="258" height="178" οnerrοr="this.src='images/isets.jpg'" />

IMG的onerror自动选择最快线路，根据服务器返回错误：
<img src="http://dianxin.xxx.com/NotExistsUrl" width="1" height="1"
   οnerrοr="location.top.url='http://dianxin.xxx.com/'"/>
<img src="http://wangtong.xxx.com/NotExistsUrl" width="1" height="1"
   οnerrοr="location.top.url='http://wangtong.xxx.com/'"/>

例如，你可能会利用这个onAbort消息来警告用户，提醒他们停止某个重要图像的加载，例如图像映射：
   <img src="pics/camnpr.gif" usemap="#map1" onAbort="window.alert('注意:这张照片含有重要的链接,请重新载入.')">

同时有另一个问题出现：如果οnerrοr="this.src='图片'"，这个"图片"也不存在时，就会出现下边的错误：
img图片没找到onerror事件 Stack overflow at line: 0

打开网页时提示 Stack overflow at line: 0。我做了截图如下：

经过分析，发现网页中存在类似如下的代码：

<img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic" />
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示

noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。

说明：如果图片存在，但网络很不通畅，也可能触发 onerror。

解决方法：第一种：：.去掉 onerror 代码；或者更改 onerror 代码为其它；或者确保 onerror 中的图片足够小，并且存在。

第二种：

<script type="text/javascript">

</script>

<td align="center"><img src="../icon/${file.suffix }.gif" οnerrοr="nofind();" />${file.name }</td>

第三种:
使用两个<img />

<style type="text/css">
.hidden {
display: none;
}
</style>
<img src="camnpr.jpg" οnerrοr="this.class='hidden';xx.class=''" />

IE下打开网页时，会弹出“Stack overflow at line: 0”的弹框。经分析，这个bug是由于img标签的onerror事件引起的。程序中用到的代码片段如下：正常情况下显示src所指路径的图片，加载失败时显示通过img标签的onerror事件显示另一张图片，问题就出现在了这里，当另一张图片也不存在时，就造成了循环触发onerror事件，在IE下就会弹出“stack overflow”的弹框。

解决的方法也很简单，在重新给img的src属性赋值时，先将onerror事件清除掉，再赋值，这样就不存在循环调用的问题了，代码段如下：

参考链接：https://blog.csdn.net/muzidigbig/article/details/101872192

https://blog.csdn.net/z_p_h/article/details/10353631

posted @ 2021-03-25 19:09 孙淡策阅读(5287) 评论(0) 收藏举报

刷新页面返回顶部

孙淡策

new Image()

公告