如何监听HTML页面加载？(Document加载的两种方式的区别)

已于 2022-05-05 14:43:01 修改
阅读量3.1k 收藏 2
点赞数 1
分类专栏： HTML-CSS 文章标签： html
于 2022-05-04 21:02:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44685906/article/details/124577533
版权
本文详细介绍了HTML页面加载的两种方式，一种是DOMContentLoaded事件，它在HTML结构加载完成后触发，不等待样式表、图片等资源；另一种是window.onload事件，它在页面所有资源包括图片、样式等都加载完毕后触发。通过监听这两个事件，可以精确掌握页面加载状态。
摘要由CSDN通过智能技术生成

如何监听HTML页面加载？或Document加载的两种方式的区别

Document加载的两种方式区别

监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件

  • 判断ready的方法:

    • 监听document的onreadystatechange，判断readyState
        document.onreadystatechange = function () {
     
        if (document.readyState === 'complete') {
最低0.47元/天 解锁文章
了旧
关注
专栏目录
html动态元素加载完毕事件,JS监听元素的加载完成/失败事件
weixin_33740988的博客
06-05 4425
〇、适用场景在前端开发中，为了优化用户体验，我们经常有等背景图完成之后显示内容、加个遮罩等待页面加载完成之后消失等需求。本文以下述的特殊情况(监听 background-image 的加载)为主，当然也通用于各种需要监听加载完成、失败事件的场景。特例—— background-image 的特殊处理由于 css 中的 background-image 会在 DOM 加载完成之后，再进行加载，所以我...
监听页面加载
diaomao7361的博客
12-24 263
document.onreadystatechange=function(){ 　　　　if(document.readystate=='complete'){ 　　　　　// 加载完成执行操作；； } } 转载于:https://www.cnblogs.com/earnest/p/8098856.html...
监听浏览器关闭页面事件
最新发布
m0_63607954的博客
07-18 981
如果需要直接关闭页面不再弹出二次确认框，则需要注销上面的监听即可。如果需要弹出二次确认框，则直接使用close方法即可，无需注销关闭页面的监听。在同一页面中，某种情况需要监听浏览器窗口关闭事件，给出二次确认框提示；上述代码的确可以实现监听页面关闭时，弹出浏览器的二次确认弹框事件，但却无法满足上面提到的。场景一：在业务页面中需要监听用户是否关闭浏览器窗口，如果中途关闭，则给出二次确认提示。场景二：在业务页面直接关闭浏览器窗口（此场景与场景一在同一个业务页面中进行）。
如何判断HTML页面加载完成
qdjoker的博客
08-01 5448
加载完成事件分为两类： ready：完成骨架的加载，也就是通常所说的DOM解析和样式加载完成，，但是不包含图片等非文字媒体文件； onload：彻底加载结束，包含图片等文件在内的所有元素都加载完成； 判断ready的方法: 监听document的onreadystatechange,判断readyState document.onreadystatechange = function () { if(document.readyState === 'complete'){ co
监听页面加载完成监听页面加载完成
08-28
监听页面加载完成监听页面加载完监听页面加载完成监听页面加载完成监听页面加载完成监听页面加载完成监听页面加载完成监听页面加载完成成
HTML5页跳转到Native页面-监听机制
guoba318的专栏
10-06 957
import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.webkit.WebView; import android.webkit.WebViewClient; public class WebActivity extends Activity {
两种方法实现在HTML页面加载完毕后运行某个js
10-25
本文将介绍两种方法来实现在HTML页面加载完成后运行JavaScript代码。 首先，我们来看传统的JavaScript方法，使用`window.onload`事件。这个事件在浏览器完成加载整个页面，包括所有资源（如图片、脚本、样式表等）...
Jquery 在页面加载后执行的几种方式
10-23
在使用`$(document).ready()`时，通常有两种形式。第一种是使用简写形式： ```javascript $(function() { // 你的代码 }); ``` 这种方式简洁明了，代码更为紧凑。另一种是完全形式： ```javascript $(document)....
js页面加载后执行的几种方式小结
10-15
jQuery的$(document).ready()方法提供了一种方式，该方式在DOM树构建完成后就执行，此时页面的结构已经可以安全地使用JavaScript操作，但外部资源如图片可能还没有完全加载完成。 ```javascript $(document).ready...
html5 页面 懒加载,实现图片懒加载(lazyload)的两种方式
weixin_29051245的博客
06-03 1442
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。图片懒加载的思路将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片...
document.visibilityState 监听浏览器
bahongying2053的博客
08-08 605
document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。 document.visibilityState：表示下面 4 个可能状态的值 hidden：页面在后台标签页中或者浏览器最小化 visible：页面在前台标签页中 prerender：...
如何做加载状态的监听。
qq906786621的专栏
02-25 401
需要在 base request 的结果加一个接口。 再用接口来控制界面的显示。
html 页面跳转监听,HTML 重定向 页面跳转
weixin_42116604的博客
06-04 1513
通过响应头重定向响应状态 301 和 302 可以指定重定向URL, 推荐使用302 FOUNDHttpServletResponse. static final int SC_MOVED_TEMPORARILY 状态代码(302)，指示资源已临时移动到另一个位置，但未来的引用仍应使用原始URI来访问资源。 保留此定义是为了向后兼容。 SC_FOUND现在是首选定义。pageEncoding="U...
html怎么实现事件监听,js事件监听的几种方式
weixin_33662430的博客
06-05 3761
js作为事件驱动的语言，那对事件的监听必不可少，那么在前端浏览器中有几种事件监听的方式呢。1.html内联属性该方式的缺点就是和html耦合高，尽量少使用2.dom属性绑定 hello var obj = document.getElementByClassName('title');obj[n].onclick = function() {alert('hello');}该方式的缺点是只能绑定一...
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5332
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
监控静态资源加载
weixin_38222139的博客
11-04 635
监控静态资源加载 引用大神的一段话来描述下背景： 怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，接口请求，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 使用error事件来监听静态资源的加载情况 window.addEventListener('error', function(err){ ...
页面监听事件：$(document).ready和window.onload=function(){}的区别
生活没有圈的博客
09-10 577
在jQuery里面，我们可以看到两种写法: $(function(){}) 和 $(document).ready(function(){})，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数,（注意，这里面的ready 是 DOM树加载完成，不是onload的页面资源加载完成的）。 使用原生的window.οnlοad=function(){}在没定义方法之前，它只是一个值为null的属性 具体的区别 页面监听事件：$(document).ready和window.οnlοad=fun
html如何监听页面错误
Start的小笔记
11-22 458
使用window.onerror监听页面全局错误
html创建多个页面，使用两种方式嵌套页面
03-31
1. 使用iframe标签嵌套页面 在主页面中使用iframe标签，将其他页面嵌入到主页面中。 ```html <!DOCTYPE html> <html> <head> <title>Main Page</title> </head> <body> <h1>Main Page</h1> <iframe src="page1.html"></iframe> <iframe src="page2.html"></iframe> </body> </html> ``` 2. 使用ajax加载页面 在主页面中使用ajax请求其他页面的内容，并将内容嵌入到主页面中的指定位置。 ```html <!DOCTYPE html> <html> <head> <title>Main Page</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $("#page1").load("page1.html"); $("#page2").load("page2.html"); }); </script> </head> <body> <h1>Main Page</h1> <div id="page1"></div> <div id="page2"></div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值