2011-12-23 48 views
2

如何引用從此JavaScript預加載的圖像?此代碼來自於問題如何引用此預加載的圖像

計算器:preload hidden CSS images

<script language="JavaScript"> 
function preloader() 
{ 
// create object 
imageObj = new Image(); 

// set image list 
images = new Array(); 
images[0]="image1.jpg" 

imageObj.src=images[0]; 
} 
</script> 

回答

0

它在你的代碼中的邏輯錯誤是由馬特·H.

而不是創建爲每個圖像的單獨Image對象指出。您只是創建一個對象並不斷更改該對象的src

function preloader() { 
    // counter 
    var i = 0; 

    // set image list 
    images = new Array(); 
    images[0] = "image1.jpg" 
    images[1] = "image2.jpg" 
    images[2] = "image3.jpg" 
    images[3] = "image4.jpg" 

    //create an array to hold all the Image objects 
    imageObjs = []; 

    // start preloading 
    for (i = 0; i <= 3; i++) { 
     var imageObj = new Image(); //create new Image object for each image 
     imageObj.src = images[i]; //set the src of new Image object to current image 
     imageObjs.push(imageObj); //add the current Image object to the array 
    } 
} 
+0

好的,但是它是如何在腳本之外的頁面中引用的。 – 2011-12-23 20:45:08

+0

@TravisJ:由於'imageObjs'是全局變量,因此您可以通過'imageObjs [0]','imageObjs [1]'來訪問每個元素,... – 2011-12-23 20:46:16

+0

? – 2011-12-23 20:47:01

0

在代碼中,你是依賴於瀏覽器緩存爲「預加載」。只有最後一個images[i]源實際上保存在imageObj變量中。只需設置圖像的src值就可以將其從瀏覽器緩存中取出。

適當的預加載方法是創建一個imageObj圖像對象的數組。您仍然通過`.src'引用,但現在您在Javascript內存中具有圖像對象而不是瀏覽器緩存。

+0

a)不是我的代碼,它來自另一個問題。 b)儘管代碼沒有被優化,但imageObj仍然保持1個預加載的圖像。 c)基於預加載可以引用該圖像以在頁面中顯示。 - 我簡化了代碼,以便*可能*您可以嘗試編輯您的答案,以獲得更有用的內容。 – 2011-12-23 20:58:19