Question

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

我看过Javascript和CSS，但是由于我仍然是Web开发的新手，所以我不确定是哪条线导致图像不可见。我创建了一个Codepen供您查看。 https://codepen.io/Jaderianne/pen/KjLGqd

HTML：

<div class="gallery" id="gallery">
   <div class="gallery-item">
       <div class="content"><img src="http://turbophoto.com/Free-Stock- 
Images/Images/Ancient%20Horse%20-%2027%20Years%20Old.jpg" alt=""></div>
   </div>
   <div class="gallery-item">
        <div class="content"><img 
src="https://source.unsplash.com/random/?tech,substance" alt=""></div>
    </div>
    <div class="gallery-item">
        <div class="content"><img 
src="https://source.unsplash.com/random/?tech,choose" alt=""></div>
    </div>
</div>

JAVASCRIPT：

var gallery = document.querySelector('#gallery');
var getVal = function (elem, style) { return 
parseInt(window.getComputedStyle(elem).getPropertyValue(style)); };
var getHeight = function (item) { return 
item.querySelector('.content').getBoundingClientRect().height; };
var resizeAll = function () {
var altura = getVal(gallery, 'grid-auto-rows');
var gap = getVal(gallery, 'grid-row-gap');
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
    var el = item;
    el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / 
(altura + gap));
});
};
gallery.querySelectorAll('img').forEach(function (item) {
item.classList.add('byebye');
if (item.complete) {
    console.log(item.src);
}
else {
    item.addEventListener('load', function () {
        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');
    });
}
});
window.addEventListener('resize', resizeAll);
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
item.addEventListener('click', function () {
    item.classList.toggle('full');
});
});

即使页面刷新后，我也希望图像始终可见。

Answer 1

第一个img的类为“ byebye”，其不透明度设置为0，这就是为什么它不可见的原因。这是通过foreach中的一行添加的：

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

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

if (item.complete) {

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

问题似乎是当此代码运行时，您的第一个图像已完成加载，因此事件处理程序从未添加，因此“ byebye”类也从未删除。

这可以通过在两种情况下（无论图像是否已加载）触发相同的代码来解决：

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");
}

CodePen：https://codepen.io/ADyson82/pen/OeYBZe

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

1 个答案: