Login

首页 > 收集信息 > jQuery/Js/Css > 正文

Image([宽度],[高度]) --

2012-05-28.Form:互联网

图像对象名称=new Image([宽度],[高度])

图像对象的属性:

border complete height hspace lowsrc name src vspace width readyState

图像对象的事件:

onabort onerror onkeydown onkeypress onkeyup onload onreadystatechange

 

程序代码

var img=new Image();

img.onload=function(){alert("img is loaded")}; //它在图像完全载入到内存之后调用。

img.onerror=function(){alert("error!")};//它在图像载入失败后调用,图像载入失败不会调用onload事件。

img.src="image1.jpg";//开始加载图片,加载图片是异步过程。

function show(){alert("body is loaded");};

window.onload=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中的问题了。

 

对于onload事件的绑定,不要放在src=’……’语句后面,因为加载图片的速度可能很快,如果图片加载完毕后,绑定onload事件的代码还没来得及执行,就会造成绑定到onload事件的函数没机会执行。其他事件的绑定也要注意这一点。

 

代码简化后如下:

var img = new Image();
img.src = “test.gif”;
img.onload = function(){
    alert(this.src);
    //other      
};

简单看过以后貌似这段代码没有什么问题,可是IE下就不是能正常的运行。不管怎么检测,IE根本不会理会,不过还是找到了解决的方法,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……

var img = new Image();
img.onload = function(){
    alert(this.src);
    //other    
};
img.src = “test.gif”;

测试成功!

结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,有的话直接就触发此事件!

粤ICP备09089143号