創建一個Image對象：var a=new Image(); 定義Image對象的src: a.src=”xxx.gif”; 這樣做就相當於給瀏覽器緩存了一張圖片。
圖像對象：
建立圖像對象：圖像對象名稱=new Image([寬度],[高度])
圖像對象的屬性： border complete height hspace lowsrc name src vspace width
圖像對象的事件：onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src 屬性一定要寫到 onload 的後面，否則程序在 IE 中會出錯。
參考代碼：
- var img=new Image();
- img.onload=function(){alert("img is loaded")};
- img.onerror=function(){alert("error!")};
- img.src="http://www.abaonet.com/img.gif";
- function show(){alert("body is loaded");};
- window.onload=show;
運行上面的代碼後，在不同的瀏覽器中進行測試，發現 IE 和 FF 是有區別的，在 FF 中，img 對象的加載包含在 body
的加載過程中，既是 img加載完之後，body 纔算是加載完畢，觸發 window.onload 事件。
在 IE 中，img 對象的加載是不包含在 body 的加載過程之中的，body 加載完畢，window.onload 事件觸發時，img
對象可能還未加載結束，img.onload事件會在 window.onload 之後觸發。
根據上面的問題，考慮到瀏覽器的兼容性和網頁的加載時間，儘量不要在 Image 對象裏放置過多的圖片，否則在 FF 下
會影響網頁的下載速度。當然如果你在 window.onload 之後，執行預加載函數，就不會有 FF 中的問題了。
可以通過Image對象的complete 屬性來檢測圖像是否加載完成（每個Image對象都有一個complete屬性，當圖像處於
裝載過程中時，該屬性值false,當發生了onload、onerror、onabort中任何一個事件後，則表示圖像裝載過程結束（不管成
沒成功），此時complete屬性爲true）
- var img = new Image();
- img.src = oImg[0].src = this.src.replace(/small/,"big");
- oDiv.style.display = "block";
- img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})
注：
ie 火狐等大衆瀏覽器均支持 Image對象的onload事件。
ie8及以下、opera 不支持onerror事件
下面截取一段Amazon使用的圖片預加載js代碼可供參考:
- amznJQ.available("jQuery", function() {
- jQuery(window).load(function() { setTimeout(function() {
- var imageAssets = new Array();
- var jsCssAssets = new Array();
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/x-locale/common/buy-buttons/review-1-click-order._V171143523_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/x-locale/common/buttons/continue-shopping._V192262037_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/x-locale/common/buy-buttons/thank-you-elbow._V192261665_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/x-locale/communities/social/snwicons_v2._V383421867_.png");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/checkout/assets/carrot._V192555707_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/checkout/thank-you-page/assets/yellow-rounded-corner-sprite._V192555699_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/checkout/thank-you-page/assets/white-rounded-corner-sprite._V212531219_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/gno/beacon/BeaconSprite-JP-02._V393500380_.png");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/G/09/x-locale/common/transparent-pixel._V386942697_.gif");
- imageAssets.push("https://images-na.ssl-images-amazon.com/images/I/61AdS2XVkGL._SX35_.jpg");
- jsCssAssets.push("https://images-na.ssl-images-amazon.com/images/G/01/browser-scripts/jp-site-wide-css-beacon/site-wide-6800426958._V1_.css");
- jsCssAssets.push("https://images-na.ssl-images-amazon.com/images/G/01/browser-scripts/navbarCSSJP-beacon/navbarCSSJP-beacon-min-583273174._V1_.css");
- jsCssAssets.push("https://images-na.ssl-images-amazon.com/images/G/01/browser-scripts/navbarJS-beacon/navbarJS-beacon-min-1773974689._V1_.js");
- jsCssAssets.push("https://images-na.ssl-images-amazon.com/images/G/01/browser-scripts/site-wide-js-1.2.6-beacon/site-wide-5626886881._V1_.js");
- // pre-fetching image assets
- for (var i=0; i<imageAssets.length; i++) {
- new Image().src = imageAssets[i];
- }
- // pre-fetching css and js assets based on different browser types
- var isIE = /*@cc_on!@*/0;
- var isFireFox = /Firefox/.test(navigator.userAgent);
- if (isIE) {
- for (var i=0; i<jsCssAssets.length; i++) {
- new Image().src = jsCssAssets[i];
- }
- }
- else if (isFireFox) {
- for (var i=0; i<jsCssAssets.length; i++) {
- var o = document.createElement("object");
- o.data = jsCssAssets[i];
- o.width = o.height = 0;
- document.body.appendChild(o);
- }
- }
- }, 2000); });
- });