Javascript Image After Loader

Question

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

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

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

Answer 1

Вы просто могли бы просто сделать:

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 является другой переменной.

Answer 2

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

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

Answer 3

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

Answer 4

На самом деле, было бы проще написать его вот так.

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