图片预加载

本篇是解决图片预加载，做到更好的用户体验，减少数据流量。
很简单的布局和样式，仅供参看，如有不好的地方往提出：
先看很简单是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

如有不好的地方，往给出意见;