位置:海鸟网 > IT > JavaScript >

动态加载图片与脚本

动态加载图片许多方法。第一种方法,随便创建一个块状元素如DIV,把它加入DOM树,然后用CSS设置背景图片。第二种前半部分同第一种,只不过这次用innerHTML加一张图片变成它的子元素。第三种,利用createElement("img"),然后加入DOM与指定它的src属性。第四种,new Image对象,然后加入DOM与指定它的src属性。

1.window.onload = function(){

2.  var image = document.createElement("div");

3.  document.body.appendChild(image)

4.  image.style.cssText = "width:400px;height:300px;background:url()"

5.}

1.  window.onload = function(){

2.  var image = document.createElement("div");

3.  document.body.appendChild(image)

4.  image.innerHTML = "<img src='http://www.cuclife.com/uploads/allimg/150727/031QHL4_1.jpg'>";

5.}

1.window.onload = function(){

2.  var image = document.createElement("img");

3.  document.body.appendChild(image)

4.  image.src='http://www.cuclife.com/uploads/allimg/150727/031QHL4_1.jpg';

5.}

1.window.onload = function(){

2.  var image = new Image;

3.  document.body.appendChild(image)

4.  image.src='http://www.cuclife.com/uploads/allimg/150727/031QHL4_1.jpg';

5.}

从代码量来看,首选最后一种。后两种起码很容易就得到图片对象的引用,我们可以用complete属性来判断其是否加载成功。不同于后面将讲述的script标签,在IE中,图片对象只要一加入src属性就开始下载图片,不管它是否已加入DOM树中。

运行代码

运行代码

来一个有用的应用,自动调整图片的大小。

运行代码

至于script,不像img有专门的内置对象,我们必须用createElement来创建。判断是否加载成功,与图片很不一样,我就不明白微软为什么不统一用complete属性,这次它改用readyState属性。不过 XMLHttpReques对象,微软也是用readyState属性。为了判断readyState 是否已经改变,微软还专门提供了一个onreadystatechange事件,这样我们就不用像上面那样写定时器了。readyState 有五个可能的值,分别为:

很明显当readyState 为complete时,脚本就可以运作了。不过onreadystatechange 事件不局限于script标签,它还可以用于object,iframe,frame,style等标签中。但有一个问题,如果我们想刷新页面,重新执行脚本,就没有反应,这时我们就要用到loaded值。换言之,complete只个时间点,loaded是个时间段。

对于标准浏览器,它们就没有这么复杂,直接用onload事件来监听就成了。

运行代码