JavaScript загружает изображения в массив и показывает в источнике изображения - PullRequest
Новая
       2

JavaScript загружает изображения в массив и показывает в источнике изображения

1 голос
/ 15 февраля 2012

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

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?

Ответы [ 3 ]

2 голосов
/ 15 февраля 2012

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

1 голос
/ 15 февраля 2012

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

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

function startImage(){

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