Javascript Image After Loader

4 user3154030 [2014-01-02 17:55:00]

Итак, я пишу javascript, который заменяет изображение по умолчанию, которое заполняет пространство для многочисленных изображений на моей веб-странице. Таким образом, страница загружается намного быстрее. (script отображается с загрузкой тела), все изображения по умолчанию имеют один и тот же класс, а их идентификатор равен их имени файла.

function imgPostLoad(totalpics, placeholder) {
    var img = document.createElement('img');
    for (var i = 0; i < totalpics; i++) {
        var picture = document.getElementsByClassName(placeholder)[i];
        img.onload = function (evt) {
            picture.src = this.src;
            picture.width = this.width;
            picture.height = this.height;
        }
        img.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

Он работает, но только для последнего последнего изображения в массиве. Остальные изображения остаются неизменными. Что с ним не так?

javascript for-loop image onload

Оригинал вопроса (на английском)

1 Решение putvande [2014-01-02 18:05:00]

Вы просто можете сделать:

function imgPostLoad(totalpics, placeholder) {
    for (var i = 0; i < totalpics; i++) {
        var picture = document.getElementsByClassName(placeholder)[i];
        picture.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

В чем проблема вашего кода, так это то, что к моменту img была загружена picture другая переменная.

Оригинал ответа (на английском)

0 Filling The Stack is What I DO [2014-01-02 18:41:00]

Собственно, было бы проще написать это так.

function imgPostLoad() {

     var placeHolders = document.body.querySelectorAll('.placeholder');

    for (var i = 0; i < placeHolders.length; i++) {

        placeHolders[i].src = "/img/" + placeHolders[i].getAttribute("id") + ".jpg";
    }
}

Оригинал ответа (на английском)

0 cumul [2014-01-02 18:26:00]

function imgPostLoad(placeholder) {
    var allPictures = document.getElementsByClassName(placeholder);
    for (var i = 0; i < allPictures.length; i++) {
        var picture = allPictures[i];
        picture.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

Оригинал ответа (на английском)

-1 frieder [2014-01-02 18:00:00]

создать элемент изображения в цикле for, подобный этому

function imgPostLoad(totalpics, placeholder){
    for (var i = 0; i < totalpics; i++){
        var img = document.createElement('img');
        var picture = document.getElementsByClassName(placeholder)[i];
        img.onload = function (evt) {
            picture.src=this.src;
            picture.width=this.width;
            picture.height=this.height;
        }
        img.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

Оригинал ответа (на английском)

Javascript Image After Loader

4 ответа