談談document.ready和window.onload的區別


在Jquery里面,我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})

這兩個方法的效果都是一樣的,都是在dom文檔樹加載完之后執行一個函數(注意,這里面的文檔樹加載完不代表全部文件加載完)。

而window.onload是在dom文檔樹加載完和所有文件加載完之后執行一個函數。也就是說$(document).ready要比window.onload先執行。

那么Jquery里面$(document).ready函數的內部是怎么實現的呢?下面我們就來看看:

我們來為document添加一個ready函數:

 

     document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       } }) }
else if (document.lastChild == document.body) { callback(); } }

document.ready這個函數是實現了。我們再來驗證一下最上面所說的“ready要比onload先執行”:

   window.onload = function () {
            alert('onload');

        };

        document.ready(function () {
            alert('ready');

        });

執行這段代碼之后,你會看到瀏覽器里面會先彈出“ready”,在彈出onload。

這個大家還是親手試試吧!

 

現在ready和onload的區別講完了,后續會繼續更新新東西。

排版好像不是很好,大家有好排版的方法可以說一下。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM