【发布时间】:2020-10-08 18:19:56
【问题描述】:
我一直在尝试找出在我选择时打开/关闭屏幕的方式(不是通过自动事件)。 所以我想出了这个解决方案:
css:
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
javascript:
function loading(action) {
console.log(action);
document.getElementById('loading').style.display = action ? 'block' : 'none';
}
html:
<div id=loading></div>
<img onerror="loading(true)">
// do whatever i need, which takes several seconds to load
<img onerror="loading(false)">
加载屏幕按假设出现,没有任何问题,但是有两件事我不清楚......
- console.log(action) 不起作用...它不会向控制台打印任何内容
- 第二张图片不会关闭加载屏幕...它只是一直保持打开状态
我在这里做错了什么?
【问题讨论】:
-
我不确定你期望发生什么,但
onerror处理程序只有在加载图像时出现错误时才会被img元素调用。 -
没错,这是一个如何触发任何 javascipt 调用的老把戏 :) 所以你可以看到该 img 中没有 src,因此我可以触发 onerror 事件,该事件将调用我的 javascript 函数拍摄/隐藏加载屏幕...显示效果很好,隐藏得不多:(
-
我不这么认为。您的
#loadingdiv 在开始时已经可见(display: block;),onerror根本没有被调用。如果你有一个假的src属性,它就会被调用。
标签: javascript html onerror