document.ready和window.onload的區別

  在Jquery裏面,咱們能夠看到兩種寫法:$(function(){}) 和$(document).ready(function(){})瀏覽器

  這兩個方法的效果都是同樣的,都是在dom文檔樹加載完以後執行一個函數(注意,這裏面的文檔樹加載完不表明所有文件加載完)。dom

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

  那麼Jquery裏面$(document).ready函數的內部是怎麼實現的呢?下面咱們就來看看:spa

  咱們來爲document添加一個ready函數:code

 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先執行」:blog

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

        };

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

        });

  執行這段代碼以後,你會看到瀏覽器裏面會先彈出「ready」,在彈出onload。rem

  這個你們仍是親手試試吧!文檔

相關文章
相關標籤/搜索