js預(yù)加載

意義：

與懶加載相反，有時我們需要實現(xiàn)例如快速快速切換頁面、圖片之類的功能時，能盡快的加載出我們所需的圖片會極大提升用戶體驗，這時用預(yù)加載將圖片先緩存到瀏覽器，用戶使用需顯示圖片時無疑會順暢很多。

原理：

1.在html中用img標簽
2.使用JavaScript的Imgage對象
3.ajax請求圖片
4.preload.js插件

實現(xiàn)

1.使用html文檔中img標簽

      <img src="./img/loading.jpg" alt="圖片" style="display:none">

      執(zhí)行文檔時直接加載進來只不過讓其不顯示

2.使用Imgage對象

      var img=new Image()
      img.src="http://www.wwenj.com/img/1.jpg"

      js中執(zhí)行到該語句后就會加載進來

3.使用ajax請求圖片

      直接用ajax請求很好理解不貼代碼，
      優(yōu)點：ajax請求過程中能有更加詳細的操作
      缺點：有跨域

4. preload.js預(yù)加載插件

      "PreloadJS"便于預(yù)先加載資源：圖像、聲音、數(shù)據(jù)、或其他的JS
   
        [PreloadJS插件地址：](http://www.createjs.cc/preloadjs/)[http://www.createjs.cc/preloadjs/]      
   

   (http://www.createjs.cc/preloadjs/)

      (PreloadJS提供了一個一致的方式預(yù)先加載在HTML應(yīng)用的內(nèi)容，以及預(yù)加載可以使用HTML標      
  簽作為XHR完成。
      默認， PreloadJS 將嘗試使用XHR加載內(nèi)容，因為它提供了進度和完成事件方面的更好支持， 
 然而由于跨域的問題，它可能仍然是優(yōu)選使用基于標簽的負載代替)

代碼：
var queue = new createjs.LoadQueue();

       queue.on("complete", handleComplete, this);
       queue.loadManifest([
           {id: "myImage", src:"path/to/myImage.jpg"} 
       ]);
       function handleComplete() {
           var image = queue.getResult("myImage");
           document.body.appendChild(image);
       }

這就是圖片預(yù)加載的實現(xiàn)。