动态加载图片与脚本

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

window.onload = function(){
  var image = document.createElement("div");
  document.body.appendChild(image)
  image.style.cssText = "width:400px;height:300px;background:url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)"
}

window.onload = function(){
  var image = document.createElement("div");
  document.body.appendChild(image)
  image.innerHTML = "<img src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg'>";
}

window.onload = function(){
  var image = document.createElement("img");
  document.body.appendChild(image)
  image.src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg';
}

window.onload = function(){
  var image = new Image;
  document.body.appendChild(image)
  image.src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg';
}

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

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

<!doctype html>
<title>javascript自动调整图片大小 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript自动调整图片大小 by 司徒正美" />
<meta name="description" content="javascript自动调整图片大小 by 司徒正美" />
<script type="text/javascript">
  window.onload = function(){
    var image = new Image;
    image.src='http://dx.78land.com/images/new.jpg';
    image.style.display = "";
    var i = 0;
    (function(){
        i++;
        if(image.complete){
          (image.width>500) && (image.width = 500);/*统一设置*/
          (image.height>200) && (image.height = 200);/*统一设置*/
        }else{
          setTimeout(arguments.callee,1);
        }
    })()
    document.body.appendChild(image);
  }
</script>
<h1 id="text">javascript自动调整图片大小 by 司徒正美</h1>

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

uninitialized:Object is not initialized with data.
loading:Object is loading its data..
loaded:Object has finished loading its data.
interactive:User can interact with the object even though it is not fully loaded.
complete:Object is completely initialized.

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

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

<!doctype html>
<title>javascript脚本加载 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript脚本加载 by 司徒正美" />
<meta name="description" content="javascript脚本加载 by 司徒正美" />
<script type="text/javascript">
  window.onload = function(){
    var script = document.createElement("script")
    script.type = "text/javascript";
    script.src = "http://files.cnblogs.com/rubylouvre/myjs.js";
    document.body.appendChild(script);
    if (!+"\v1"){  //IE
      script.onreadystatechange = function(){
        if (script.readyState == "complete" || script.readyState == "loaded"){
          alert(getElementsByClassName("title")[0].innerHTML);
        }
      };
    } else {  
      script.onload = function(){ 
       alert(getElementsByClassName("title")[0].innerHTML);
      };
    }
  }
</script>
<h1 class="title">javascript脚本加载 by 司徒正美</h1>

链接: https://fly63.com/article/detial/8554

动态加载图片与脚本

懒加载的3种实现方式

图片懒加载的前世今生

Vue实现懒加载

页面性能优化-原生JS实现图片懒加载

js实现图片惰性加载

小程序如何使用分包加载

php的自动加载的使用

js判断异步引入的js文件是否加载完毕

Flutter异步加载：Future，async/await

简单高效实现一个按需加载图片的逻辑