javascript - 如何从使用 addEventListener 添加的事件的元素中删除类？

Question

我尝试使用 JavaScript 仅在加载图像后才显示图像。

我尝试通过向它们添加一个类(隐藏)来实现这一点，然后使用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: Cannot read property 'remove' of undefined 在下一行。

Answer 1

1. 您无法将加载事件监听器添加到已渲染的图像，除非它是内联的`
2. 您无法向尚未存在的图像添加加载事件监听器 - 就像“ future ”事件处理程序
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" />