zoukankan      html  css  js  c++  java
  • onload 事件、DOMContentLoaded事件、DOM加载顺序

    1、onload 事件

    定义与语法

    onload事件会在页面或者图像加载完成后立即发生。

    法:onload="SomeJavaScriptCode“;

    参数:SomeJavaScriptCode    描述:必需。规定该事件发生时执行的 JavaScript。

    支持该事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

    支持该事件的 JavaScript 对象:image, layer, window

    实例

    在本例中,文本 "Page is loaded" 会被显示在状态栏中:

    <html> <head> <script type="text/javascript"> function load() { window.status="Page is loaded" } </script> </head> <body onload="load()"> </body> </html>

    2、DOMContentLoaded事件 

    这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。

    domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
      document.addeventListener('DOMContentLoaded',function(){...},false);

    3、DOM加载顺序

    1、解析HTML结构。

    2、加载外部脚本和样式表文件。

    3、解析并执行脚本代码。

    4、构造HTML DOM模型。

    5、加载图片等外部文件。

    6、页面加载完毕。

  • 相关阅读:
    大同世界的Java 和.NET 开发
    关于Memcached 你了解多少?
    C#二进制与字符串之间的相互转换
    Nopcommerce主要用到的技术及特点
    小程序之路
    .NET方面的框架的整理和总结
    如何将FastReportOnlineDesign 灵活的应用到C/S B/S 程序当中?
    WebApi 的CRUD 的方法的应用
    关于EF 通用增删改查的封装
    基于Json序列化和反序列化通用的封装
  • 原文地址:https://www.cnblogs.com/Shannong/p/JsFirstBlog.html
Copyright © 2011-2022 走看看