$(document).ready() Vs. window.onload

最新推荐文章于 2024-04-29 17:54:33 发布

harveymorning

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量260

点赞数 1

本文链接：https://blog.csdn.net/yuhaozhong/article/details/68958404

版权

jquery 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

Javascript

2 篇文章 0 订阅

订阅专栏

dom

1 篇文章 0 订阅

订阅专栏

on the basis of functionality, $().ready() ==window.onload
all content embeded inside them will be executed once page loaded. while, some advantages of $().ready() comparing with straightly using built-in JavaScript function.

Javascript will not execute its corresponding event function until all content (e.g DOM,image, object, stylesheet…) loaded.
To the ready() which means that event will occur once HTML document (only DOM loaded)has been loaded.
$(document).ready() which can be used multiple times without any else interference. But window.onload not like that, actually, the previous called function will be crashed by latter functions.

First of all, let’s have one example about window.onload event to see the result of event

    <script src="../../scripts/jquery3.js"></script>
</head>
<body>
<script type="text/javascript">
    // let's take two test examples as experimental usage.
    function func1(){
        alert('This is the first called function');
    }
    function func2() {
        alert('This is the second called function');
    }

    window.onload=func1;
    window.onload=func2;

</script>

这里写图片描述

Well, a trick method to avoid such problem provided by Simon Willison as below.

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
        window.onload = func;
} else {
window.onload = function() {
        oldonload();
        func();
        }
    }
}
addLoadEvent(func1);
addLoadEvent(func2);

otherwise, a not-bad way that is: 

window.onload=function{
    func1();
    func2();
}
//go this way if just a few number of such onload events //and no further consideration later on.

In short words, jQuery abstract all troublesome with JavaScript away

 // jQuery snippet of code as below.   

    $(document).ready(function(){
        func1();
        func2();
    })

A recap to above.

Event fires up once dom loaded comparing to all content loaded of window.onload.
Execute multiple times wrapped in $(function(){}) without additional interference.

引用了DOM Scripting
Web Design with JavaScript and the Document Object Model 和锋利的jQuery.

harveymorning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$(document).ready() Vs. window.onload

There are some advantages comparing with straightly using built-in JavaScript function.Javascript will not execute its corresponding event function until all content (e.g DOM,image, object, stylesheet
复制链接

扫一扫