多種js圖片預先載入實作方式分享_javascript技巧

圖片預載有大體有幾種方式

 1.html標籤或css載入圖片

　　顯而易見我們使用img標籤或透過標籤的background-image屬性都可以實現圖片的預先載入。但是為了避免初次載入過多圖片影響體驗。一般最好在文件渲染完成以後再載入（使用window.onload等）。

 2.純js實作預先載入

空城計-Code記的Javascript實作圖片的預先載入的完整實作的預先載入實例為

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

　　原理就是循環建立Image對象，並設定對象的src為指定圖片，然後監聽圖片載入完成onload = function(){imageloadpost()}，當圖片載入完成後就會執行到imageloadpost。原來IE6還有一個問題：如果預先載入的圖片已經在記憶體中就不會再出發img.onload事件。但是IE7+都沒有問題了。其他瀏覽器也沒問題，所以上面這種img.onload監聽事件已經沒有相容問題了。

 3.Ajax實作預先載入

　　ajax請求是任何資料都可以要求的，圖片也不例外。先看一下js/css預先載入

// XHR to request a JS and a CSS 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.js'); 
    xhr.send(''); 
    xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'http://domain.tld/preload.css'); 
    xhr.send(''); 

而圖片的ajax預載實際和純js預載圖片一樣

new Image().src = "http://domain.tld/preload.png"; 

只不過這裡的解釋成了ajax加載，可以理解new Image都是ajax get請求。

以上就是本文的全部內容，希望對大家理解js圖片預先載入有所幫助。