HTMLImageElement类型的简便利用

这个是我在复习书籍的时候看见的,当时一个同学想通过页面发送请求,但是数据量不是太大,所以用的get方式,但是页面用表单提交请求的话会让页面进行跳转,当时我在网上查了一点资料,发现基本上都是通过ajax请求,无奈现在还没有学习到ajax这一部分,于是翻书,正好看到这里了。所以后面的代码改了过后,一句话解决了问题。

1 var chunk = 数据; var url = "http://www.baidu.com"; document.createElement("img").src = url + "&" + chunk;

在Javascript中对于图片格式进行了实现类型为HTMLImageElement继承自HTMLElement,这个类型拥有img标签公有的特性名对应的属性,可以通过这些属性进行设置。 HTMLImageElement类型是一个动态的类型,也就是说不添加进DOM树中还是能够加载,这个过程我把它叫做”预加载”,如下:

1 var nimg = document.createElement("img"); nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif"; 
//当执行到这一条语句的时候,此时它就会预加载,即使你没有添加进DOM树中,没有添加进DOM树只是你看不见。

 

如何来验证这个问题?我通过添加load事件来监听是否加载完成,如果加载完成则弹窗,这里我把顺序分成在监听前设置src属性,和监听后设置src属性。 第一种方式:先设置src属性后监听

1 var nimg = document.createElement("img"); nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif"; 
2  //这里并没有弹窗 
3 
4 nimg.addEventListener("load",function(){alert(1)},false); document.body.appendChild(nimg); 
5  //即使我添加进DOM树还是没有弹窗

 

第二种方式:先监听后设置src属性

1 var nimg = document.createElement("img"); 
2 
3 nimg.addEventListener("load",function(){alert(1)},false);
4 
5 nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif";  
6 //执行到这里的时候会弹窗,说明监听到事件。

 

文档信息

发表评论

电子邮件地址不会被公开。 必填项已用*标注