图片懒加载

我们在做项目的时候，经常会遇到这样一个需求：通过查询条件查出一个列表，每个列表项的左边是一个图片，右边是该项对应的文字信息。一般来讲，这个渲染过程的原理是：通过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