在默认使用 <img> 标签遇上网络状态不好的情况下,图片会一点一点地加载显示出来。
预加载技术是避免这种方式来显示图片,而是会让图片下载好后才加载出来。

实现方式

  1. 生成 img 标签实例
  2. 为实例 onload 绑定事件处理函数
    1. 函数的工作是把 img 实例放入 DOM 中显示

      实现例子

      ```javascript var oDiv = document.getElementsByTagName(‘div’)[0], imgSrcArr = [‘//xxx.com/1.jpg’,’//xxx.com/2.jpg’,’//xxx.com/3.jpg’]; //是加载的图片地址

imgSrcArr.foreach(function(imgSrc){ var oImg = new Image(); // 生成 img 标签实例 oImg.src = imgSrc; oImg.style.width = ‘100%’;

oImg.onload = function(){ // 图片加载完触发事件
oDiv.appendChild(oImg); } }); ```