JavaScript加载数组中的图像并在图像源中显示

I created an array of images

我创建了一系列图像

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;

I then create a function that is linked with a in my html file:

然后我创建一个与我的html文件中链接的函数：

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

function startImage(){

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

My image tag : <img id="pic" src="" height="300" width="500" border="0" alt="image"> This fails to update my img object, i used firebug to look at the DOM and my array is being populated properly but the img src is not be set?

我的图片标签： JavaScript加载数组中的图像并在图像源中显示这无法更新我的img对象，我用firebug来查看正在填充DOM和我的数组但是没有设置img src？

3 个解决方案

#1

Your example is incomplete. You need to show what the imageItem constructor does (and it's convention to use a capital letter for the first character in a constructor), so:

你的例子不完整。您需要显示imageItem构造函数的作用（并且在构造函数中使用大写字母表示第一个字符），所以：

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

should do the job here. You also seem to want imgArray as a global, so declare it as one:

应该在这里做的工作。您似乎也希望将imgArray作为全局，因此将其声明为一个：

var imgArray;

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

Assigning an array literal is a bit easier:

分配数组文字有点容易：

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

var totalImgs = imgArray.length;

Though I can't see why you don't just assign the array literal directly and not bother with the wrapper function. The startImage function can be a bit tidier:

虽然我不明白为什么你不直接分配数组文字而不打扰包装函数。 startImage函数可能有点整洁：

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

Accessing element properties directly is more reliable across browsers and less to type than using setAttribute (which has quirks in some browsers).

直接访问元素属性在浏览器中更可靠，而且比使用setAttribute（在某些浏览器中有怪癖）更少。

#2

Load multiple images sounds like a functionality that you might want to user in different projects. I would suggest to create a function that can process your images array and append the image object to a DIV:

加载多个图像听起来就像您可能希望在不同项目中使用的功能。我建议创建一个可以处理图像数组并将图像对象附加到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);

You can also invode the loadImage() function from yout button:

您还可以从yout按钮调用loadImage（）函数：

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

#3

Modify your javascript function like this and see.

像这样修改你的javascript函数并查看。

function startImage(){

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

#1