图片懒加载与预加载

图片懒加载

原理：暂时不设置图片的src属性，而是将图片的url隐藏起来

图片预加载

原理：需要展示大量图片，实现图片的提前加载

CSS预加载图片方式：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  

avascript预加载图片的方式：

function preloadImg(url) {

   var img = new Image();

   img.src = url;

   if(img.complete) {

       //接下来可以使用图片了

       //do something here

   } else {

       img.onload = function() {

           //接下来可以使用图片了

           //do something here

       };

   }

}