图片异步加载

/*图片递归异步延迟加载*/
/*一次只能加载一张，费劲*/
loadImages(0);
function loadImages(n){
    var li=$.create('li',{});
    $("footer ul").append(li);
    var temp=$.create('img',{src:"img/image.png",id:"img"+n});
    li.append(temp);
    var img = new Image();
        img.src = data.images[n].src;
        img.addEventListener('load', function(){                                        $("#img"+n).attr({src:img.src})
        n++;
        if(n<data.images.length){
          loadImages(n);
        }
    }, false);
}

/*
第二种方法，把页面文字先渲染后，在选择全部的图片，异步一张张的更换src
*/

loadImages(data.goods_img);
        function loadImages(data){
            var all=$("#scroller img");
            loading(0);
            function loading(n){
                var img=new Image();
                img.src=data[n];
                img.addEventListener('load',function(){
                    all[n].src=img.src;
                    n++;
                    if(n<all.length){
                        loading(n);
                    }
                });
            }
        }

/*
*忽然感受上面两种都好蛋疼，都是递归一张张替换。遂有第三种
*/

function lazyload(){
    var imgs=document.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
        (function(index){
            var img = new Image();
            img.src=imgs[index].dataset.src;
            img.setAttribute("data-index",i);
            img.onload=function(){
                var index=parseInt(img.dataset.index);
                imgs[index].src=img.src;
            }
        })(i);
    };
}