图片懒加载问题

Question

一个页面都是img，宽度100%，高度自适应，那么页面初始化的时候图片还没有加载进来，所以img都是在可见区域内的，这个时候就一次性加载出来了。我后来判断等上一张加载出来再去获取下一张的offsetTop高度，可是我发现这样反而慢。有什么解决方法吗？

Answer 1

参考下这个
http://plugins.jquery.com/laz...

Answer 2

先用透明图片站位，在计算。

Answer 3

你可以尝试判断元素是否出现在窗口可是去来控制visibility：hidden；从而来提升性能

Answer 4

试试有序加载呢 按照图片数组中的顺序依次加载
`

Preload.prototype._ordered=function () {
    var opts=this.opts,
        imgs=this.imgs,
        len=imgs.length,
        count=0;
    load();
    function load() {

        var imgObj=new Image();
        $(imgObj).on('load error',function () {
            opts.each&&opts.each(count)
            if(count>=len){
                //所有图片已经加载完毕
                opts.all&opts.all()
            }
            else{
                load()
            }
            count++;
        });
        imgObj.src=imgs[count];
    }

};`