Загрузить все изображения внутри класса

Я загружаю 52 изображения, которые имеют один и тот же класс, при печати загруженных изображений на консоль количество выводимых изображений изменяется каждый раз, когда я обновляюсь.

Желаемым результатом будет загрузка каждого изображения в классе, поскольку я пытаюсь отслеживать прогресс с помощью индикатора выполнения, а затем отображать галерею изображений.

var thumbs = document.getElementsByClassName("thumbImg");
var thumbTotal = thumbs.length;
console.log("number of thumbImg's = ", thumbTotal);

$(".thumbImg").on("load", function() {
    console.log("the following has loaded = ",this);
});

Это выводит следующее, показывающее случайное количество загруженных изображений.

1/2

2/2


javascript jquery image-loading
person esd    schedule 08.03.2016    source источник
comment
Не уверен, что это поможет, но getElementsByClassName возвращает список активных узлов. Это означает, что он фактически не запрашивает узлы в момент вызова getElementsByClassName. Он запрашивает каждый раз, когда вы ссылаетесь на список узлов, возвращаемый вызовом. Это позволяет вам всегда иметь список узлов, который представляет текущие узлы, соответствующие имени класса, даже если новые узлы были добавлены ПОСЛЕ первоначального вызова. Попробуйте изменить имя getElementsByClass на querySelectorAll (theClassName).   -  person Scott Marcus    schedule 08.03.2016

Ответы (1)


arrow_upward
4
arrow_downward

Возможно из-за кеширования браузера. Вы можете попробовать проверить свойство .complete каждого изображения и немедленно запустить код, если он уже завершен.

$(".thumbImg").each(function(i, el) {
  if (el.complete) {
    handler.call(el);
  } else {
    $(el).on("load", handler);
  }
})

function handler() {
    console.log("the following has loaded = ",this);
}
person Community    schedule 08.03.2016
comment
Спасибо, я не подумал о кешировании браузера. Пальцы вверх! - person esd; 08.03.2016