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

我正在尝试使用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:无法读取下一行未定义的属性'remove'。

如上所述，您没有正确使用.addEventListener。另外，不要使用getElementsByTagName，因为它返回一个活动节点列表。而是使用.queryselectoral

下面，引用了同一图像的4种不同分辨率。您将看到代码按预期工作

imgs=document.querySelectorAll'img'； 对于var i=0；i的第二个参数是函数，而不是语句。将语句包装在函数{statement}中。现在，我没有发现错误，但它仍然不会删除该类！尝试使用Chrome F12工具调查您的问题。您确定加载事件正在触发吗？在函数中，将console.log“loaded”并检查您的控制台，或者使用您喜爱的浏览器的开发人员工具进行调试并在该行上放置断点。这通常是错误的方法。阅读如何操作。我相信这只在图像加载时间比脚本执行时间长的情况下才有效。如果我错了，我不理解你的代码是如何工作的第一行帮助我理解了为什么每次我重新加载页面时都会得到奇怪和不一致的结果，并且基于你的代码，我已经实现了我想要的，尽管我不清楚你为什么使用theImg变量。非常感谢。请看我的密码。在我做了一些测试之后，它变得简单多了。