關於圖片延遲加載或者懶加載的說法

var img = new image();
    img.src = "小圖佔位.jpg";   //加載載佔位的，和html在同一文件夾下，實際也要onlaod加載，本地加載速度快一點
    img.onload = function(){
      document.querySelector("body").appendChild(img);
    }
var img_r = new image();//這個東西能夠放到默認圖片加載的onload裏
    img_r.src = "大圖真實.jpg"; //下載真實的，遠程服務器請求
    img_r.onload = function(){
        img.src = img_r.src     //下載完後，替換佔位
    }

1，第一種方法，小圖佔位
2，第二種方法，容器背景圖佔位，img下載後放到容器裏，遮住容器背景圖

註釋：服務器的圖片在src以後就開始下載了，可是隻有當圖片onload(也就是圖片下載完成)後往body裏添加纔會直接顯示出來。。

$("#main_scroll").empty().html(data);
    var imgs = document.querySelectorAll("img");
    var img_arry = [];
    for(var i = 0 ;i < imgs.length; i++){
        img_arry[i] = imgs[i].src;
        imgs[i].style.height = SW+"px";
        imgs[i].style.width = SW+"px";
        (function(index){
            imgs[index].src = 'img/defalut.png';
            imgs[index].onload = function(){
                var temp_img = new Image();
                temp_img.src = img_arry[index];
                var height = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalHeight;
                var width = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalWidth;
                imgs[index].src = temp_img.src;
                imgs[index].style.height = height+"px";
                imgs[index].style.width = width+"px";
            }
            imgs[index].onerror = function(){
                console.log("默認圖片加載出錯了"+index)
            }
        })(i)
    };