HTMLImageElement类型的简便利用

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

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

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

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

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

 var nimg = document.createElement("img"); nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif";
  //这里并没有弹窗 

 nimg.addEventListener("load",function(){alert(1)},false); document.body.appendChild(nimg);
  //即使我添加进DOM树还是没有弹窗

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

 var nimg = document.createElement("img"); 

 nimg.addEventListener("load",function(){alert(1)},false);

 nimg.src = "http://www.baidu.com/img/baidu_jgylogo3.gif";
 //执行到这里的时候会弹窗，说明监听到事件。