Home >Web Front-end >JS Tutorial >JQuery-- onload, ready method explained in detail

JQuery-- onload, ready method explained in detail

巴扎黑Original: 2017-06-25 10:29:451444browse

There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as pictures), and the other isonload, indicates that all elements of the page including images and other files have been loaded. (It can be said: ready is loaded before onload!!!)

General style control, such as image size control is placed in onload Loading;
The method triggered by jS event can be loaded in ready;

Many people who use jQ start writing scripts like this:

Usual writing method
```
$(function(){
	// do something
});
```
##In fact, this is the abbreviation of jq ready(), It is equivalent to:
```
$(document).ready(function(){
	//do something
})
```
is also equivalent to The following method, jQuer The default parameter is: "document";
```
$().ready(function(){
	//do something
})
```

##$(document).Ready() Method VS OnLoad event VS $(window).load() method

##ContactJQueryGeneral The first thing learned is when to start an event. For a long time, events triggered after the page was loaded were loaded in the Onload event of "Body".
For the Onload event of Body and JQuery Compared with the Ready method, there are many disadvantages. For example:

##For the Body.Onload event , it will only be triggered after all page content is loaded. I mean all content, including pictures, flash, etc. If the page has a lot of content, the user will have to wait for a long time. Long time.
## And for $(document ).ready() method, this method will only be triggered after all the DOM of the page has been loaded, which will undoubtedly greatly speed up the web page.

cb116c637d110a2bae602a260ab1cbec
36cc49f0c466276486e50c850b7e4956
在Onload事件中只能这样加载，很丑陋…
而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行

加载多个函数的问题
代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!
执行先后顺序不同

但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.

<script type="text/javascript">
    $(window).load(function() {
         alert("hello");
    });
    $(window).load(function() {
        alert("hello again");
    });
</script>

上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法

<script type="text/javascript">
	$(window).unload(function() {
	    alert("good bye");
	});
</script>

上面代码会在页面关闭时引发.

在所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法

<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>

对，就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：

<body>
<p id="test">this is the content</p>
    <script type="text/javascript">

        alert($("#test").html());//I Can display the content
        
    </script>
</body>
<body>
   <script type="text/javascript">

        alert($("#test").html());//I Can&#39;t display the content
        
    </script>
    <p id="test">this is the content</p>
</body>

上面两段代码, 第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

The above is the detailed content of JQuery-- onload, ready method explained in detail. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery.ready() function instance usageNext article：Detailed explanation of jQuery.ready() function instance usage

See more

JQuery-- onload, ready method explained in detail

Related articles