本篇是解決圖片預加載，做到更好的用戶體驗，減少數據流量。
很簡單的布局和樣式，僅供參看，如有不好的地方往提出：
先看很簡單是css:

jj.png

JavaScript原生代碼：

<script>   
 function add(){        
      var oBox=document.getElementById('box');        
      for(var i=0;i<24;i++){       //因為本地有24張圖片，所以用動態創建所有的img;     
          var aImg=document.createElement('img');    //創建所有的img標簽;        
          oBox.appendChild(aImg);         //把創建所以的img放到oBox里面;
      }      
}   
 window.onload=window.onscroll=function(){  //onscroll當滾動條觸發時,觸發該事件;     
       var aImg=document.getElementsByTagName('img');       
       if(aImg.length<24){     //這里的判斷是防止一直觸發add()函數;因為每次觸發onscroll都會執行一下aad()，所以加了個判斷;       
          add();       
       }          
      var s= document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離上邊距的度;       
            for(var i=0;i<aImg.length;i++){            
                  var T=document.documentElement.clientHeight;   //可視化區域的高度;    
                  var t=aImg[i].offsetTop;  //獲取每個img距離上邊框距的距離;          
                  //  var l=aImg[i].offsetLeft;            
                  if(s+T>=t){            //當滾動條+可視化遇見大于了每個img的t的時候執行;    
                  aImg[i].src='../images/'+i+'.jpg'; //這里的i是我每一個img圖片,是有序圖片;        
                  }      
            }    
  };
</script>

html布局：

ggg.png

如有不好的地方，往給出意見;