一、jQuery $(document).ready()执行顺序-------------二、jquery $(document).ready() 与window.onload的区别

最新推荐文章于 2021-03-19 19:01:20 发布

平叔叔

最新推荐文章于 2021-03-19 19:01:20 发布

阅读量1.7k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery $(document).ready()执行顺序

jQuery的官方网站的解释如下：

“While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

当页面DOM 元素全部加载完毕后就执行.ready()。

如果在.ready()执行之前有javascript代码存在，那么javascript将怎么执行呢？
答案是先执行.ready()之前的javascript代码，然后执行.ready()。

写个example

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <span>This page is shown to understand '$(document).ready()' in jQuery. <br /><span> 
    <p> 
        If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...<br /><br /> 
    </p> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
        document.write('The JS is doing sth after DOM loaded and before executing $(document).ready()...<br /><br />'); 
        //alert('The JS is doing sth after DOM loaded and before executing $(document).ready()...'); 

        document.write('DOM is loaded and $(document).ready() will now be executed!<br /><br />'); 
        //alert('DOM is loaded and $(document).ready() will now be executed!'); 

        $(document).ready(function () { 
            $(document.body).append("$(document).ready() is now been executed!!!<br /><br />"); 
            //alert("$(document).ready() is now been executed!!!"); 
        }); 
    </script> 
</body> 
</html>

执行完页面打印出来的顺序是:
这里写图片描述

jquery $(document).ready() 与window.onload的区别
1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$ (function(){});
这里写图片描述

另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 —load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 Jquery 代码如下：$ (window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}
转自 http://www.cnblogs.com/haichuan3000/articles/2128889.html

平叔叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、jQuery $(document).ready()执行顺序-------------二、jquery $(document).ready() 与window.onload的区别

jQuery $(document).ready()执行顺序jQuery的官方网站的解释如下：“While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images ha
复制链接

扫一扫