博客
关于我
load和DOMContenLoaded的区别
阅读量:804 次
发布时间:2023-02-06

本文共 967 字,大约阅读时间需要 3 分钟。

DOM加载与DOMContentLoaded事件

页面加载完成时,load和DOMContentLoaded事件会被自动触发,但它们的执行时机存在显著差异。了解这些差异对于优化用户体验至关重要。

DOM加载步骤如下:

  • 解析HTML结构
  • 加载外部脚本和样式表文件
  • 解析并执行脚本代码
  • 构造HTML DOM模型(DOMContentLoaded执行点)
  • 加载图片等外部文件
  • 页面加载完毕(load执行点)
  • 从上述流程可见,DOMContentLoaded事件在第4步执行,而load事件在第6步完成后触发。因此,DOMContentLoaded事件会在页面加载完毕之前执行,这使得它比load事件更符合用户体验。

    例如,以下代码能够清晰地展示事件执行顺序:

    window.addEventListener("load", function () {    console.log("load执行");}, false);window.addEventListener("DOMContentLoaded", function () {    console.log("domContentLoad执行");}, false);

    结果显示,DOMContentLoaded事件先于load事件执行。

    JQuery提供了多种文档加载方法:

  • $(document).ready(function() { ... }):在DOM结构构建完成后执行,适用于大多数场景。
  • $(function() { ... }):与$(document).ready等效。
  • $(document).load(function() { ... }):在页面完全加载后执行,包括外部资源。
  • 值得注意的是,JQuery的文档准备方法(ready)在构建DOM结构时即执行,而load方法等待所有资源加载完毕后才执行。

    IE支持onreadystatechange事件,当document.readyState变为"complete"时触发相应代码。然而,这一事件的可靠性较低,特别是在页面包含大量二进制资源时,可能会因资源加载延迟而无法准确触发。

    因此,建议优先使用DOMContentLoaded事件,它在大多数情况下能够确保DOM结构稳定,适合执行大部分客户端逻辑。

    转载地址:http://mfufk.baihongyu.com/

    你可能感兴趣的文章
    MYSQL中 find_in_set() 函数用法详解
    查看>>
    MySQL中auto_increment有什么作用?(IT枫斗者)
    查看>>
    MySQL中B+Tree索引原理
    查看>>
    mysql中cast() 和convert()的用法讲解
    查看>>
    mysql中datetime与timestamp类型有什么区别
    查看>>
    MySQL中DQL语言的执行顺序
    查看>>
    mysql中floor函数的作用是什么?
    查看>>
    MySQL中group by 与 order by 一起使用排序问题
    查看>>
    mysql中having的用法
    查看>>
    MySQL中interactive_timeout和wait_timeout的区别
    查看>>
    mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
    查看>>
    mysql中json_extract的使用方法
    查看>>
    mysql中json_extract的使用方法
    查看>>
    mysql中kill掉所有锁表的进程
    查看>>
    mysql中like % %模糊查询
    查看>>
    MySql中mvcc学习记录
    查看>>
    mysql中null和空字符串的区别与问题!
    查看>>
    MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
    查看>>
    MYSQL中TINYINT的取值范围
    查看>>
    MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
    查看>>