18910140161

JavaScript-如何知道是否所有onload事件都已触发?-堆栈溢出

顺晟科技

2022-10-19 12:23:56

226

此问题是一个更具体的问题,是此问题的超集:如何知道窗口“load”事件是否已经触发

用例

所以我有这样一个用例,我需要制作一个延迟加载的仅限于CSS的图片幻灯片,为此,我通过onload事件实现了这一点,该事件使用幻灯片编号触发,只有当图片完成加载有问题的图片时,才会在延迟后触发幻灯片编号。问题是,建议的答案显示在第一个onload事件激发之后,这不适合我。所以我的问题是--如何检测是否所有onload事件都已激发?

问题

我的所有幻灯片都经过,然后幻灯片出现错误行为。这就是为什么我需要检测这种情况,以便在事后控制幻灯片行为,并修复此问题。

Stackblitz链接

https://stackblitz.com/edit/js-fsymew

GitHub链接

https://github.com/munchkindev/js-fsymew

我的HTML:

'complete'

JS:

'complete'

尝试2

HTML:

'complete'

JS:

'complete'

顺晟科技:

window.onload在窗口加载时运行。这应该在所有元素、脚本和其他东西加载之后进行。

我将使用承诺来监听图像加载事件,这样您就可以等待所有承诺完成后再启动旋转木马。

例如,如果您有以下HTML:

您可以等待所有这些文件加载如下:

我在下面为您创建了工作示例。您会注意到,在所有图像加载之前,旋转木马将显示一个红色边框。加载后,边框颜色变为绿色。

或者您可以在JSFiddle上查看它:https://JSFiddle.net/thelevicole/b13gpyfd/2/


编辑

下面是更新的示例,说明如何仅在幻灯片在视图中时延迟加载幻灯片图像,而不是等待在init上加载所有图像。

https://jsfiddle.net/theLevicole/b13gpyfd/3/

我添加了一个钩子机制,允许每次幻灯片更改时都运行回调函数

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航