Javascript 用我的HTML编写的图像不可见

我在我的第一个网页上创建了一个图库，并且看到了我想要使用的模板。其中一些图像将显示一次，但当页面刷新后，图像会显示一秒钟，然后消失。当您将鼠标悬停在图像应位于的位置时，光标变为指针，它仍在页面上

我已经看过Javascript和CSS，但由于我还是web开发新手，我不确定是哪一行导致图像不可见。我已经创建了一个代码笔供您查看

HTML:

---

我希望图像在任何时候都可见，即使页面已刷新。

第一个

img

具有类“byebye”，该类将其不透明度设置为0，这就是它看起来不可见的原因。这是通过foreach中的一行添加的：

gallery.querySelectorAll('img').forEach(function (item) {
  item.classList.add('byebye');

然后，代码检查图像是否已完成加载：

if (item.complete) {

如果它已完成加载，则除了将数据记录到控制台之外，它什么也不做。如果尚未完成加载，则会添加一个事件侦听器以等待图像加载。当该事件触发时，它运行代码，该代码（除其他外）删除“byebye”类

问题似乎是，当此代码运行时，您的第一个映像已经完成加载，因此事件处理程序永远不会被添加，因此“byebye”类永远不会被删除

这可以通过使其在任何情况下触发相同的代码来修复（无论图像是否已加载）：

---

CodePen:

如果您使用股票图像在CodePen上进行测试，我也遇到了这个问题，我想这只是与此环境有关，您应该忽略它。代码正在Atom上编写，但我创建了一个CodePen，希望有人能看到问题所在。但是谢谢你，下次注意：）第一个img有一个类“byebye”，它将不透明度设置为0，这就是为什么它看起来不可见。这是由foreach中的一行添加的。如果图像已完成加载，则应该再次删除该类。。。我怀疑在第一个图像的情况下，它在代码运行时还没有完成加载，因此它从未删除过类。@ADyson当我删除“byebye”样式时，第一个图像的悬停有点滑稽。你可以编辑代码笔来了解我的意思。您知道我需要如何编辑它以使其与第二个和第三个图像相同吗？很抱歉，我使用了错误的方法…我怀疑问题是第一个图像在代码运行时已完成加载，因此“加载”事件（删除byebye类）永远不会被删除。在这种情况下，只需将image元素记录到控制台。谢谢你向我解释这件事并给我一个解决办法。非常感谢！

gallery.querySelectorAll('img').forEach(function (item) {
  item.classList.add('byebye');

if (item.complete) {

gallery.querySelectorAll("img").forEach(function(item) {
  item.classList.add("byebye");
  if (item.complete) {
    console.log(item.src);
    loaded(item);
  } else {
    item.addEventListener("load", function() {
      loaded(item);
    });
  }
});

//...

function loaded(item) {
  var altura = getVal(gallery, "grid-auto-rows");
  var gap = getVal(gallery, "grid-row-gap");
  var gitem = item.parentElement.parentElement;
  gitem.style.gridRowEnd =
    "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
  item.classList.remove("byebye");
}