html页面渲染完成事件,javascript – 在渲染完成之前调用.onLoad吗？

我想在页面加载后调用一些JS,这可能涉及延迟,因此我希望首先加载页面以显示内容……但似乎onLoad处理程序中的代码在呈现完成之前被调用.是否有一个更好的事件我可以使用,当页面“完成”时触发？

为了澄清,我希望在页面呈现在屏幕上之后运行一些JS,所以真的是“post-everything事件”.

解决方法:

沿着时间顺序有几个兴趣点.这个通用序列是一个很好的概述,即使不同的浏览器和版本实现细节有点不同. (这假设您正在使用原始Javascript并且需要最小化跨浏览器问题;对于跨浏览器问题的全面内部处理,JQuery有点不同)：

页面开始 – 浏览器已经开始在页面上工作,但是环境不断变化.您的JS操作可能发生在错误的上下文中,并且只有在正确的上下文稳定后才会被刷新.您可能根本不想尝试执行任何JS.

T1]“onLoad”事件 – [但是你得到事件：addEventListener(“Load”…,window.onload = …等]页面的所有部分都已经从服务器中识别并下载并且在本地系统的内存.为了识别所有部分,已经发生了一些解析.(注意“加载”是“下载”的同义词,而不是“解析”和“渲染”.)

您现在拥有合适的环境,可以开始执行JS代码而不必担心丢失任何内容.但是,尝试读取或操作HTML的操作[getElementById(…,appendChild(…等)可能会以奇怪的方式失败,或者可能看起来有效但随后会消失,或者可能会执行与预期不同的操作.

T2] DOM-almost-ready–这个hack非常简单,完全跨浏览器.只需把你的JS< script> …< / script>在HTML的最后,就在< / body>之前标签.尽管尝试在< body>的最末端附加或修改DOM,但大多数事情都会正常工作.可能产生令人惊讶的结果.这不完全正确,但99％的时间都有效.鉴于其简单性和正确操作的高概率,这可能是要走的路(至少如果你不使用JQuery).

T3] DOM-ready– [但是你得到的事件：addEventListener(“DOMContentLoaded”…,window.ondomcontentloaded = …等等)此时HTML已被完全解析并且JS是100％可用的,包括所有读取或操作HTML的函数[getElementById(…,appendChild(…等)].

T4]渲染完成 – 浏览器完成在屏幕上显示内容.没有任何此类事件或任何合理的跨浏览器版本无关的方法来检测这种情况.这也是一样,因为你可能并不是真的想要这个.如果浏览器已经在屏幕上显示了页面然后你操作了DOM,那么你将获得一个“闪光”,其中前后两个都至少在屏幕上可见.您可能真正想要的是可以执行任意JS代码的点;这是以前的(T3)DOM-ready)时间点.

标签：javascript,html

来源： https://codeday.me/bug/20190531/1188288.html