国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生JS實現document.ready以及和window.onload的先后順序

wangym / 2279人閱讀

摘要:和的區別是上面定義的方法在樹加載完成后就會執行,而是在頁面資源比如圖片和媒體資源,它們的加載速度遠慢于的加載速度加載完成之后才執行。也就是說要比先執行。驗證一下要比先執行執行這段代碼之后,你會看到瀏覽器里面會先彈出在彈出。

jQuery 里面的文檔就緒用法
jQuery里面,我們可以看到兩種寫法:
$(function(){})$(document).ready(function(){})
這兩個方法的效果都是一樣的,都是在dom文檔樹加載完之后執行一個函數,
(注意,這里面的readyDOM樹加載完成,不是onload的頁面資源加載完成的)。
document.ready方法 原生js本身并沒有提供 document.ready方法
//document是一個DOM對象,這個對象本身沒有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();
            }
        }

//還有一種方法是:
(function () {
  ? var ie = !!(window.attachEvent && !window.opera);
  ? var wk = /webkit/(d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
  ? var fn = [];
  ? var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
  ? var d = document;
  ? d.ready = function (f) {
  ??? if (!ie && !wk && d.addEventListener)
  ????? return d.addEventListener("DOMContentLoaded", f, false);
  ??? if (fn.push(f) > 1) return;
  ??? if (ie)
  ????? (function () {
  ??????? try { d.documentElement.doScroll("left"); run(); }
  ??????? catch (err) { setTimeout(arguments.callee, 0); }
  ????? })();
  ??? else if (wk)
  ????? var t = setInterval(function () {
  ??????? if (/^(loaded|complete)$/.test(d.readyState))
  ????????? clearInterval(t), run();
  ????? }, 0);
  ? };
    })();

//實際使用的時候,上面兩種方法選一個即可使用 document.ready( function(){} );
//結論是原生js本身并沒有提供 document.ready方法
window.onload 在沒定義方法之前,它只是一個值為null的屬性
//控制臺打印一下window,看看onload是什么東東
window
//other...
onlanguagechange:null
onload:null
onloadeddata:null
//other...

//可以看到window的onload屬性的值是null
//window.onload = function() {//code...}

//在使用的時候:先使用函數表達式的方式給它定義函數,很容易犯錯的是 將它當作函數直接使用。
document.readywindow.onload 的區別是:

上面定義的document.ready方法在DOM樹加載完成后就會執行,而window.onload是在頁面資源(比如圖片和媒體資源,它們的加載速度遠慢于DOM的加載速度)加載完成之后才執行。也就是說$(document).ready要比window.onload先執行。

驗證一下 ready 要比 onload 先執行:
 window.onload = function () {
            alert("onload");
        };

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98111.html

相關文章

  • onload事件與ready區別

    摘要:好久沒寫文章了,再來一波,首先上圖參考鏈接與的區別詳見瀏覽器工作原理瀏覽器工作原理前言頁面加載完成有兩種事件一是,表示文檔結構結構已經加載完成不包含圖片等非文字媒體文件,二是,指示頁面包含圖片等文件在內的所有元素都加載完成。 好久沒寫文章了,再來一波,首先上圖: showImg(https://segmentfault.com/img/bVLD32?w=1105&h=244); 參考...

    mating 評論0 收藏0
  • document.readywindow.onload區別

    摘要:和的區別文檔加載完成事件頁面加載完成有兩種事件一是,表示文檔結構已經加載完成不包含圖片等非文字媒體文件二是,指示頁面包含圖片等文件在內的所有元素都加載完成。即當所有鏈接被鼠標單擊的時候,都執行也就是說頁面加載時綁定,真正該觸發時觸發。 document.ready和onload的區別——JavaScript文檔加載完成事件頁面加載完成有兩種事件: 一是ready,表示文檔結構已經加載完...

    B0B0 評論0 收藏0
  • WEB頁面生命周期,DOMContentLoaded,load,beforeunload,unlo

    摘要:簡言理解頁面的生命周期,文檔加載事件及順序對開發有十分的重要意義。同步的腳本最先執行,它先于事件執行。當準備就緒時,事件在上觸發。表示文檔的當前狀態,可以在事件中跟蹤文檔狀態的變更。已經解析完畢時觸發,幾乎與同時發生,但在事件之前觸發。 簡言 理解WEB頁面的生命周期,文檔加載事件及順序對WEB開發有十分的重要意義。如果不理解,在元素未加載就提前操作元素,則得不到想要的結果。而如果頁面...

    Jingbin_ 評論0 收藏0
  • 【面試篇】JS基礎知識查漏補缺

    摘要:因為在頁面加載完成后,引擎維護著兩個隊列,一個是按頁面順序加載的執行隊列,還有一個空閑隊列,使用定時函數就是將回調函數加入到空閑隊列中,故和其他定時器是并發執行的。 1.window.onload和$(document).ready()的區別: ①執行時間:window.onload會在所有元素,包括圖片,引用文件加載完成之后執行,而$(document).ready()則會在HTML...

    myeveryheart 評論0 收藏0
  • 理解瀏覽器是如何加載及渲染網頁

    摘要:的速度明顯快于重排重繪與的區別理解了瀏覽器是如何渲染頁面之后我們再來比較這兩者就很好理解了執行的時間必須等到頁面內包括圖片的所有元素加載完畢后才能執行。 先上圖,我們再慢慢解釋,這圖就是瀏覽器加載網頁的一個過程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 當我們在瀏覽器輸入一個地址...

    kevin 評論0 收藏0

發表評論

0條評論

wangym

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<