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

【问题标题】：JavaScript load Images in an Array and Show in Image SourceJavaScript 在数组中加载图像并在图像源中显示
【发布时间】：2012-02-15 02:24:33
【问题描述】：

我创建了一个图像数组

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 文件中创建一个与 a 链接的函数：

<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？

【问题讨论】：

imageNum 定义了吗？如果未定义，则 imageNum++ 将返回 NaN .. 还有，是否定义了 imgArray？如果不是，那么 imgArray[n] 将抛出异常。你可能应该使用 imgArray.push(new imageItem(imageDir + "armory.jpg"))..
在 startImage() 中调用 imgArray[0] - 但无法从函数内部识别 imgArray！
什么是imageItem？你确定它返回一个HTMLImageElement吗？你确定你的imageDir 是正确的吗？
您可能需要提供更多详细信息以便我们提供帮助（即您的更多代码）。否则，我不得不问你是否调用了initialize()？

标签： javascript html arrays setattribute

【解决方案1】：

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

你也可以从你的按钮调用 loadImage() 函数：

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

【讨论】：

【解决方案2】：

您的示例不完整。您需要显示 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（在某些浏览器中存在怪癖）相比，直接访问元素属性跨浏览器更可靠且输入更少。

【讨论】：

ImageItem 函数和被声明为全局的数组有很大帮助。谢谢
你能告诉我如何在没有包装函数的情况下分配数组吗？

【解决方案3】：

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

function startImage(){

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

【讨论】：