圖片預加載有大體有幾種方式
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圖片預加載有所幫助。
