javascript - 元素必须可见才能使 "load"事件监听器正常工作吗？

Question

在我的文档中，有两个 svg 图像:预览和结果。根据预览图像计算结果图像；我通过添加/删除类 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 间距)的示例。

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>

希望对你有帮助!