js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、on...

最新推荐文章于 2024-07-02 15:03:05 发布

转载最新推荐文章于 2024-07-02 15:03:05 发布 · 432 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hfeng007/p/9133635.html

文章标签：

#javascript #ViewUI

本文详细介绍了HTML页面中不同类型的加载事件触发时机的区别，包括原生JavaScript的window.onload和body.onload事件，以及使用jQuery库实现的多种加载事件。通过示例代码展示了这些事件的执行顺序及其在实际开发中的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

</head>
<body onload="aaa()">
<div >
    <p>hello world!</p>
</div>
<script type='text/javascript'>

    window.onload = function(){
        alert("页面加载完成====》onload");//速度次之使用jQuery对象，页面加载完毕【DOM tree + 外部图片 + 资源】
    }

    $(window).load(function(){
        alert("jquery===》window load" ); //速度次之使用DOM对象，页面加载完毕【DOM tree + 外部图片 + 资源】
    })
    $(function(){
        alert("jquery====》document onload");//速度并列第一，DOM结构加载完毕之后【浏览器把所有的HTML放入DOM tree之前就开始执行】
    });
    $(document).ready(function () {
        alert("jquery====》document ready");//速度并列第一，DOM结构加载完毕之后【浏览器把所有的HTML放入DOM tree之前就开始执行】
    });

    function aaa(){
        alert("静态标签====》onload"); //速度最慢，一般绑定在<body onload="aaa()">等待body加载完成，就会执行aaa()方法。但是与window.onload方法冲突，会造成在后面的覆盖前面的。二者只能存在一个。
    }
</script>
</body>
</html>


操作前记得引入jq包。
一般我们在使用的时候，用的是：