我们在做项目的时候，经常会遇到这样一个需求：通过查询条件查出一个列表，每个列表项的左边是一个图片，右边是该项对应的文字信息。一般来讲，这个渲染过程的原理是：通过AJAX从服务器拿到对应的json文件，data如下：
[
{
"img": "http://webpack.github.io/assets/what-is-webpack.png",
"info": "webpack img"
},
...
]
然后根据json数据循环生成一段html代码加入到页面中。
在不考虑设计模式和加载速度的情况下，代码如下：
var html = [];
for(var i = 0; i < data.length; i++) {
html.push(
'<p>',
'<img src="' + data[i].img +'" />',
'<span>' + data[i].info + '</span>',
'</p>'
);
}
document.getElementById('container').innerHTML = html.join('');
但是，如果返回的img过大，那么在渲染列表的时候会出现图片一帧一帧加载或者空白期的现象，这极大的影响了用户体验。因此，通常采用懒加载的方式对图片进行处理，即先渲染出来img标签，当前img的src设置一个较小的图片源（如一个loading.gif），然后在适当的时候再将图片源改为data内的真正路径。
何为"适当的时候"？
先了解一下懒加载的原理：
var im = new Image()一个实例，然后将该实例的src设置为需要加载的图片源地址，那么当图片加载完成之后会触发该实例的onload方法，在onload方法内对已存在的img标签进行src替换即可。
那么"适当的时候"代表的就是：当im.src="图片源地址"之后，触发im的onload方法时。可以理解为浏览器这时已经将该图片下载到"本地"（当然并不是本地文件夹，只是一个可以被瞬间读取的地址），在onload内，页面的img标签可以秒速读取相应的资源，从而将图片显示到浏览器上。
核心代码如下：
//需要加载时间较长的图片源路径
var remoteImgUrl = 'http://webpack.github.io/assets/what-is-webpack.png',；
//loading.gif
loadingImgUrl = 'assets/img/loading.gif';
var myImage = function() {
var domImg = document.createElement('img'); document.getElementById('container').appendChild(domImg);
var img = new Image();
img.onload = function() {
domImg.src = this.src;
}
return {
setUrl: function(realUrl) {
domImg.src = loadingImgUrl;
img.src = realUrl;
}
}
}
核心原理代码示例github地址：https://github.com/zhiyuanMain/skills/tree/master/lazyload
