为了“加载"元素，元素必须是可见的.事件监听器上班吗? [英] Must an element be visible in order to "load" event listener to work?

问题描述

在我的文档中，有两个svg图像:预览和结果.根据预览图像计算结果图像；我通过添加/删除类hidden-display在它们之间进行切换，该类进一步受css的影响，如下所示:

In my document, there are two svg images: the preview and the result. The result image is computed based on the preview image; I switch between them by adding/removing class hidden-display, which is further affected by css like this:

.hidden-display {
display: none;
}

这似乎运作良好.

在计算结果图像时，我想隐藏预览图像，只显示进度条；加载结果图像后，我希望它被显示并隐藏进度条.这是有效的代码；特别看到函数showResult()的两次出现:

While the result image is being computed, I want to hide the preview image and show only a progress bar; once the result image is loaded, I want it to be displayed and hide the progress bar. Here's the code that works; see especially the two occurrences of function 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
}

问题:虽然上面的代码有效，但是它并没有完全实现我想要的功能:它隐藏了预览，显示了结果，然后才调用事件侦听器功能，从而隐藏了进度酒吧.

Problem: While the code above works, it doesn't do exactly what I wanted: it hides the preview, shows the result and only then the event listener function is called, which hides the progress bar.

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

If I comment out showResult() in the function submitChanges() and uncomment it in the event listener function instead, the listener function resultImageLoaded(event) is never called - probably meaning the result image is never loaded. This leads me to suspicion that invisible elements don't trigger the "load" event listeners, but that seems strange.

我在两种浏览器(Internet Explorer 11和Opera 33.0)中对此进行了测试.在IE中，一切正常，并调用了事件侦听器，但是在Opera中，我遇到了上述问题.

I tested this in two browsers - Internet Explorer 11 and Opera 33.0. In IE, everything works as expected and the event listener is called, but in Opera I encountered the problem described above.

任何帮助将不胜感激.

推荐答案

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

Per our discussion, visibility:hidden is solving the event issue. Following is a example addressing your second problem, 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>

希望有帮助！

这篇关于为了“加载"元素，元素必须是可见的.事件监听器上班吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！