在圖像源數組和顯示的JavaScript加載圖像

我創建的圖像陣列在圖像源數組和顯示的JavaScript加載圖像

function initialize(){ 
//add our 10 images to our array 
imgArray[imageNum++] = new imageItem(imageDir + "img1.jpg"); 
imgArray[imageNum++] = new imageItem(imageDir + "img2.jpg"); 
imgArray[imageNum++] = new imageItem(imageDir + "img3.jpg"); 

} 
var totalImgs = imgArray.length;

然後我創建一個與我的HTML文件鏈接的功能：

<button id="startButton" onclick="startImage()">Start</button> 

function startImage(){ 

    document.getElementById("pic").setAttribute("src", imgArray[0].src); 
}

我圖片標籤：<img id="pic" src="" height="300" width="500" border="0" alt="image"> 這不能更新我的img對象，我用firebug來看看DOM，我的數組正在被正確填充，但img src沒有被設置？

來源

2012-02-15 Warz

是imageNum界定？如果它沒有被定義，那麼imageNum ++將返回NaN ..也是，是否定義了imgArray？如果不是，那麼imgArray [n]將拋出異常。你可能應該使用imgArray.push（new imageItem（imageDir +「armory.jpg」））.. – valentinas 2012-02-15 02:30:10

in startImage（）你調用imgArray [0] - 但imgArray不能從函數內部識別！ – alfasin 2012-02-15 02:32:19

什麼是'imageItem'？你確定它返回一個'HTMLImageElement'？你確定你的'imageDir'是正確的嗎？ – 2012-02-15 02:41:18

您的示例不完整。你需要顯示imageItem構造做什麼（和它的約定使用第一個字符一個大寫字母在構造函數中），所以：

function ImageItem(src) { 
    this.image = new Image(); 
    this.src = src. 
}

應該在這裏做的工作。您也似乎想imgArray作爲一個全球性的，所以聲明它爲一個：

var imgArray; 

function initialize(){ 
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg");

分配數組文本是一個容易一點：

imgArray = [ new ImageItem(imageDir + "armory.jpg"), 
       new ImageItem(imageDir + "eddy.jpg"), 
       ... 
       new ImageItem(imageDir + "...") 
    ]; 
} 

var totalImgs = imgArray.length;

雖然我不明白爲什麼你不只需直接分配數組字面值，而不用打包函數。該startImage函數可以是一個位整潔：

function startImage(){ 
    document.getElementById("pic").src = imgArray[0].src; 
}

訪問元素的屬性是直接跨瀏覽器更可靠和小於使用setAttribute（其具有怪癖在某些瀏覽器）鍵入。

來源

2012-02-15 03:20:48 RobG

ImageItem函數和聲明爲全局的數組很有幫助。謝謝 – Warz 2012-02-15 19:22:00

你能告訴我如何在沒有包裝函數的情況下分配數組嗎？ – Warz 2012-02-15 23:01:42

修改你的javascript功能，像這樣並看看。

function startImage(){ 

    document.getElementById("pic").src = imgArray[0].src; 
}

來源

2012-02-15 03:20:00

加載多個圖像聽起來像您可能想要在不同項目中使用的功能。我建議創建一個可以處理圖像陣列的功能和圖像對象追加到一個DIV：

var images = [ 
    'path/to/image1.png', 
    'path/to/image2.png', 
    'path/to/image3.png', 
    'path/to/image4.png', 
    'path/to/image5.png' 
]; 

function loadImages(imgArr, targetId){ 
    for(var i=0; i< imgArr.length; i++) { 
     console.log(imgArr[i]); 
     var img = new Image(); 
      img.src = imgArr[i]; 
     document.getElementById('output').appendChild(img); 
    } 
} 

loadImages(images);

您也可以invode從YOUT按鈕的LoadImage（）函數：

<button onclick="loadImages(images)">Start</button>

來源

2012-02-15 03:35:29 appcropolis

在圖像源數組和顯示的JavaScript加載圖像

回答

相關問題