元素必须可见才能 "load" 事件侦听器工作吗？

Question

在我的文档中，有两个 svg 图片：预览图和结果图。结果图像是基于预览图像计算的；我通过 adding/removing class hidden-display 在它们之间切换，这进一步受到 css 的影响，如下所示：

.hidden-display {
display: none;
}

这似乎运作良好。

在计算结果图的时候，我想隐藏预览图，只显示一个进度条；加载结果图像后，我希望显示它并隐藏进度条。这是有效的代码；尤其是函数 showResult():

的两次出现

function resultImageLoaded(event) {
    console.log("Inside add event listener function");
    resultImage.removeEventListener("load", resultImageLoaded, false);
    //showResult();    // Doesn't work if uncommented
    hideProgressBar();
    console.log("End event listener");
}

function submitChanges() {
    showProgressBar();

    var inputData = getInputString();
    var uri = "./ResultImage.cshtml?inputData=" + encodeURIComponent(inputData);

    resultImage.data = uri;
    resultImage.addEventListener("load", resultImageLoaded, false);

    hidePreview();
    showResult();    // Doesn't work if commented out
}

问题： 虽然上面的代码有效，但它并没有完全按照我的要求进行：它隐藏了预览，显示了结果，然后才调用了事件侦听器函数，它隐藏了进度条。

如果我在函数 submitChanges() 中注释掉 showResult() 并在事件侦听器函数中取消注释，则永远不会调用侦听器函数 resultImageLoaded(event) - 可能意味着结果图像是从未加载。这让我怀疑不可见元素不会触发 "load" 事件侦听器，但这看起来很奇怪。

我在两个浏览器中对此进行了测试 - Internet Explorer 11 和 Opera 33.0。在IE中，一切正常，事件监听器被调用，但在Opera中，我遇到了上述问题。

如有任何帮助，我们将不胜感激。

Answer 1

根据我们的讨论，visibility:hidden 正在解决事件问题。以下是解决您的第二个问题的示例，UI spacing.

function registerEvent() {
  document.getElementById("test").addEventListener("click", function() {
    console.log("Test");
  });
}

function addClass(str) {
  document.getElementById("test").className = str;
}

div {
  height: 100px;
  width: 100px;
  border: 2px solid gray;
  float: left;
  margin: 10px;
  padding: 10px;
}
.display {
  display: none
}
.hidden {
  visibility: hidden
}
.invisible {
  visibility: hidden;
  height: 0px;
  width: 0px;
  margin: 0px;
  padding: 0px;
}
.show {
  visibility: visible;
  display: block;
}

<div id="test">0</div>
<div id="test1">1</div>


<button onclick="addClass('display')">Display</button>
<button onclick="addClass('hidden')">Hidden</button>
<button onclick="addClass('invisible')">Invisible</button>
<button onclick="addClass('show')">Show</button>

希望对您有所帮助！

Answer 2

事实上，在 Opera 中不能在 display:none 的节点上注册事件。由于使用可见性可能很容易弄乱格式，因此它可能是一种使用不透明度的解决方案，例如：

.hide {
  opacity: 0;
  z-index: -20;
}

.show {
  opacity: 1;
  z-index: -1;
}

只需在您想要 show/hide 的 div 上切换这两个类。如果用户需要与呈现的 div 中的某些内容进行交互，您将必须添加 z-index（如上所述）。这也开启了添加一些漂亮的过渡的可能性。

元素必须可见才能 "load" 事件侦听器工作吗？

Must an element be visible in order to "load" event listener to work?

javascript

event-handling

opera

addeventlistener

image-loading