在图像源数组和显示的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加载图像

回答

相关问题