摘要:和的區別是上面定義的方法在樹加載完成后就會執行,而是在頁面資源比如圖片和媒體資源,它們的加載速度遠慢于的加載速度加載完成之后才執行。也就是說要比先執行。驗證一下要比先執行執行這段代碼之后,你會看到瀏覽器里面會先彈出在彈出。
jQuery 里面的文檔就緒用法
在jQuery里面,我們可以看到兩種寫法:document.ready方法 原生js本身并沒有提供 document.ready方法
$(function(){}) 和 $(document).ready(function(){}),
這兩個方法的效果都是一樣的,都是在dom文檔樹加載完之后執行一個函數,
(注意,這里面的ready 是 DOM樹加載完成,不是onload的頁面資源加載完成的)。
//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.ready 和 window.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
摘要:好久沒寫文章了,再來一波,首先上圖參考鏈接與的區別詳見瀏覽器工作原理瀏覽器工作原理前言頁面加載完成有兩種事件一是,表示文檔結構結構已經加載完成不包含圖片等非文字媒體文件,二是,指示頁面包含圖片等文件在內的所有元素都加載完成。 好久沒寫文章了,再來一波,首先上圖: showImg(https://segmentfault.com/img/bVLD32?w=1105&h=244); 參考...
摘要:和的區別文檔加載完成事件頁面加載完成有兩種事件一是,表示文檔結構已經加載完成不包含圖片等非文字媒體文件二是,指示頁面包含圖片等文件在內的所有元素都加載完成。即當所有鏈接被鼠標單擊的時候,都執行也就是說頁面加載時綁定,真正該觸發時觸發。 document.ready和onload的區別——JavaScript文檔加載完成事件頁面加載完成有兩種事件: 一是ready,表示文檔結構已經加載完...
摘要:簡言理解頁面的生命周期,文檔加載事件及順序對開發有十分的重要意義。同步的腳本最先執行,它先于事件執行。當準備就緒時,事件在上觸發。表示文檔的當前狀態,可以在事件中跟蹤文檔狀態的變更。已經解析完畢時觸發,幾乎與同時發生,但在事件之前觸發。 簡言 理解WEB頁面的生命周期,文檔加載事件及順序對WEB開發有十分的重要意義。如果不理解,在元素未加載就提前操作元素,則得不到想要的結果。而如果頁面...
摘要:因為在頁面加載完成后,引擎維護著兩個隊列,一個是按頁面順序加載的執行隊列,還有一個空閑隊列,使用定時函數就是將回調函數加入到空閑隊列中,故和其他定時器是并發執行的。 1.window.onload和$(document).ready()的區別: ①執行時間:window.onload會在所有元素,包括圖片,引用文件加載完成之后執行,而$(document).ready()則會在HTML...
摘要:的速度明顯快于重排重繪與的區別理解了瀏覽器是如何渲染頁面之后我們再來比較這兩者就很好理解了執行的時間必須等到頁面內包括圖片的所有元素加載完畢后才能執行。 先上圖,我們再慢慢解釋,這圖就是瀏覽器加載網頁的一個過程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 當我們在瀏覽器輸入一個地址...
閱讀 2337·2021-11-24 11:16
閱讀 2022·2021-09-30 09:47
閱讀 1996·2021-09-10 10:51
閱讀 1316·2019-08-30 14:08
閱讀 3133·2019-08-30 13:47
閱讀 1521·2019-08-30 13:02
閱讀 3227·2019-08-29 12:29
閱讀 3179·2019-08-26 17:05