Как удалить класс из элемента события, добавленного с помощью addEventListener?

Question

Я пытаюсь отображать изображения только после их загрузки, используя JavaScript.

Я пытался добиться этого, добавляя к ним класс ( hidden ), а затем используя addEventListener , класс удаляется после загрузки.

Вот код:

imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.add('hidden');
    imgs[i].addEventListener('load', this.classList.remove("hidden"));
}

После перезагрузки страницы первое изображение исчезает, что указывает на то, что класс был добавлен, но что-то пошло не так в следующей строке. В консоли я получаю: Uncaught TypeError: Невозможно прочитать свойство 'remove' из неопределенного в следующей строке.

Answer 1

1. Вы не можете добавить прослушиватель события загрузки для уже отрисованных изображений, если он не является встроенным `
2. Вы не можете добавить прослушиватель события загрузки к изображениям, которые еще не представлены, например, обработчик событий в будущем
3. Вы МОЖЕТЕ добавить обработчик события загрузки, а затем изменить источник:

// this code runs AFTER the data URI has loaded so it can be simple
document.querySelectorAll('img').forEach(function(img) {
  img.addEventListener('load', function() {
    this.classList.remove("hidden");
  });
  img.src = img.getAttribute("data-src");
});

.hidden {
  visibility: hidden;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image1" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image2" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image3" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image4" class="hidden" />

Answer 2

Как уже говорилось, вы не используете .addEventListener правильно. Также не используйте getElementsByTagName(), так как он возвращает список активных узлов. Вместо этого используйте .querySelectorAll().

Ниже приведены ссылки на 4 разных разрешения одного и того же изображения. Вы увидите код, работающий как задумано.

imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('load', function(){ 
      this.classList.remove("hidden") 
    });
}

img { border:1px solid grey; width:75px; }
.hidden { visibility:hidden; }

<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12710/web.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12704/large_web.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12707/print.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12702/full_jpg.jpg" class="hidden">