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;

Затем я создаю функцию, которая связана с a в моем 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 не установлен?


javascript arrays html setattribute
person Warz    schedule 15.02.2012    source источник
comment
определяется imageNum? Если он не определен, то imageNum ++ вернет NaN .. также определен ли imgArray? в противном случае imgArray [n] выдаст исключение. И вам, вероятно, следует использовать imgArray.push (new imageItem (imageDir + armory.jpg)) ..   -  person valentinas    schedule 15.02.2012
comment
в startImage () вы вызываете imgArray [0] - но imgArray не распознается изнутри функции!   -  person Nir Alfasi    schedule 15.02.2012
comment
Что такое imageItem? Вы уверены, что он возвращает HTMLImageElement? И уверены ли вы, что ваш imageDir правильный?   -  person    schedule 15.02.2012
comment
Возможно, вам потребуется предоставить более подробную информацию, чтобы мы могли помочь (например, дополнительную информацию о вашем коде). В противном случае мне придется задавать такие вопросы, как вы вызывали initialize ()?   -  person Laurent    schedule 15.02.2012

Ответы (3)


arrow_upward
2
arrow_downward

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

person RobG    schedule 15.02.2012
comment
Очень помогли функция ImageItem и массив, объявленный как глобальный. Спасибо - person Warz; 15.02.2012
comment
Можете ли вы показать, как я могу присвоить массив без функции оболочки? - person Warz; 16.02.2012

arrow_upward
2
arrow_downward

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

<button onclick="loadImages(images)">Start</button>
person appcropolis    schedule 15.02.2012

arrow_upward
0
arrow_downward

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

function startImage(){

    document.getElementById("pic").src =  imgArray[0].src;
}
person Prasad Rajapaksha    schedule 15.02.2012