在我的文档中,有两个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
}
问题:虽然上面的代码有效,但它并没有完全符合我的要求:它会隐藏预览,显示结果,然后才会调用事件监听器函数,这会隐藏进度条。
如果我在函数showResult()
中注释submitChanges()
并在事件侦听器函数中取消注释它,则永远不会调用侦听器函数resultImageLoaded(event)
- 这可能意味着结果图像永远不会被加载。这让我怀疑隐形元素不会触发“负载”。事件听众,但这看起来很奇怪。
我在两个浏览器中测试了这个--Internet Explorer 11和Opera 33.0。在IE中,一切都按预期工作,并调用事件监听器,但在Opera中我遇到了上述问题。
非常感谢任何帮助。
答案 0 :(得分:1)
根据我们的讨论,$query = $this->db->get_where('mvc_user', array('email' => $email, 'password', $password));
正在解决事件问题。
以下是解决第二个问题UI间距的示例。
$this->db->where('email',$email);
$this->db->where('password',$password);
$query = $this->db->get('mvc_user');

visibility:hidden

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

希望它有所帮助!
答案 1 :(得分:1)
事实上,在Opera中,无法在display:none的节点上注册事件。由于使用可见性可能很容易弄乱格式化,因此可能是一个不透明的解决方案,如:
.hide {
opacity: 0;
z-index: -20;
}
.show {
opacity: 1;
z-index: -1;
}
只需在要显示/隐藏的div上切换这两个类。如果用户需要与显示的div中的某些内容进行交互,则必须添加z-index(如上所述)。这也开启了添加一些不错过渡的可能性。