在默认使用 <img>
标签遇上网络状态不好的情况下,图片会一点一点地加载显示出来。
预加载技术是避免这种方式来显示图片,而是会让图片下载好后才加载出来。
实现方式
- 生成 img 标签实例
- 为实例 onload 绑定事件处理函数
imgSrcArr.foreach(function(imgSrc){ var oImg = new Image(); // 生成 img 标签实例 oImg.src = imgSrc; oImg.style.width = ‘100%’;
oImg.onload = function(){ // 图片加载完触发事件
oDiv.appendChild(oImg);
}
});
```