时间戳

首页 > 解决方案 > 如何从使用 addEventListener 添加的事件的元素中删除类？

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

问题描述

我试图仅在加载后使用 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: Cannot read property 'remove' of undefined at the next line。

标签： javascriptdom

解决方案

  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" />

推荐阅读