JavaScript загрузка изображения в массиве и шоу в Image Source

Question

Я создал массив изображений

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); 
} 

Моего image tag: <img id="pic" src="" height="300" width="500" border="0" alt="image"> Это не позволяет обновить мой объект img, я использовал firebug для просмотра DOM, и мой массив заполняется правильно, но img src не установлен?

Answer 1

Ваш пример неполный. Вы должны показать, что делает 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 (который имеет причуды в некоторых браузерах).

Answer 2

Измените свою функцию javascript так, как показано на рисунке.

function startImage(){ 

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

Answer 3

Загрузка нескольких изображений звучит как функция, которую вы можете захотеть пользователю в разных проектах. Я хотел бы предложить, чтобы создать функцию, которая может обработать ваш массив изображения и добавить объект изображения в 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 функции LoadImage() из YOUT кнопки:

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