JS window.onload为什么不等待加载

问题描述 投票:0回答:2

为什么它可以工作而无需等待页面完全加载。另外,当整个页面都完全加载到Javascript上时,如何运行函数?

enter image description here

javascript onload
2个回答
1
投票

取决于您对“已加载”的定义。

load事件将触发...

...]网页完全加载了所有内容(包括图像,脚本文件,CSS文件等)。 Source

这里就是这种情况。 在原始HTML文档中的所有图像和脚本文件以及CSS文件均已加载!但是,在Twitter的情况下,“已加载”状态是脚本稍后将启动new元素的加载的状态。这超出了原始页面加载的范围。

如果您想等待所说的“已加载”,则必须从技术上问自己这是什么意思。我猜答案应该是“元素X可见时”。在这种情况下,可以通过在浏览器控制台中检查DOM来确定要等待的元素,然后安装MutationObserver以侦听要添加/修改的元素。 (最糟糕的解决方案是检查该元素是否存在的时间间隔。)

例如,对于Twitter,这对我有用(监视要加载的第一个故事):

MutationObserver

-1
投票

const observer = new MutationObserver(mutations => { if (mutations.some(mutation => { return Array.from(mutation.addedNodes).some(node => node.querySelector('article')) })) { setTimeout(() => { // Wait for all the updates of this frame to go through console.log('Page fully loaded!') }, 0) observer.disconnect() } }) observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true }) 函数的语法更改为以下任意一项,然后尝试

onload

带有window.addEventListener('load', (event) => { console.log('page is fully loaded'); });

onload
© www.soinside.com 2019 - 2024. All rights reserved.