圖片異步加載

/*圖片遞歸異步延遲加載*/
/*一次只能加載一張，費勁*/
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);
    };
}