$(document).ready、body.Onload()和 $(window).load的區別

時間 2019-11-11

標籤 document ready body.onload body onload window load 區別欄目 Windows 简体版

原文原文鏈接

JavaScript文檔加載完成事件

window.load(function(){...})和body.onload()都存在一樣一個問題，那都是在頁面全部元素(包括html標籤以及引用到得全部圖片,Flash等媒體)加載完畢後執行的,這是它們的共同點.$(document).ready()是文檔結構已經加載完成（不包含圖片等非文字媒體文件），沒必要等到全部的加載完畢。javascript

原理是：css

$(document).ready(function (){ alert('use in page script tag') });
在jquery腳本加載的時候,會設置一個isReady的標記,監聽DOMContentLoaded事件(這個不是什麼瀏覽器都有的,不一樣瀏覽器,jquery運做方式不同).固然遇到調用ready函數的時候,若是isReady未被設置,那就是說頁面未加載完,就會把要執行的函數用一個數組緩存起來,當頁面加載完後,再把緩存的函數一一執行.
另外補充：
jquery ready能夠寫好幾個，每一個都執行
onload只能寫一個，你寫好幾個，也只執行一個，好像是執行最後一個，而$(window).load()能夠加載多個函數html

用$(window).load(function(){...})而不用body.onload()的幾個理由java

不用body.Onload()理由1：jquery

若是咱們想同時加載多個函數,咱們必須這樣寫數組

<body onload="fn1(),fn2()"></body>看起來極其醜陋,若是用$(window).load()咱們能夠這樣加載多個函數瀏覽器

$(window).load(function() {
            alert("hello,我是jQuery!");
  });
$(window).load(function() {
   alert("hello,我也是jQuery");
});緩存

這樣寫它會從上往下執行這兩個函數,而且看起來漂亮多了.cookie

不用body.Onload()理由2：閉包

用body.Onload()不可以作到js和html徹底分離,這是一個很嚴重的問題.

另外用$(window).load(function(){...})和body.onload()都存在一樣一個問題,由於開始也說到了,它們都須要等到頁面的全部內容

加載完畢才執行,可是若是當網速比較慢的時候,加載一個頁面每每須要較長的時間(幾秒到十幾秒不等,甚至更長...),因此咱們常常

會遇到頁面尚未徹底加載完畢而用戶已經在操做頁面了這種狀況,這樣頁面表現出來的效果就跟咱們預期的效果不同了,

因此在這裏我推薦使用$(document).ready(function(){}),或簡寫爲$(function(){})，由於他會在頁面的dom元素加載完畢後就執行,

而無需等到圖片或其餘媒體下載完畢.

可是有時候確實咱們有須要等到頁面的全部東西都加載完後再執行咱們想執行的函數,因此是該使用$(window).load(function(){...})仍是

該使用$(function(){})每每須要結合具體須要而做不一樣的選擇.

最後附上一段在全部DOM元素加載以前執行的jQuery代碼

(function() {
alert("DOM還沒加載哦!");
})(jQuery)

</script>

補充1：刷新也只執行一次

刷新後只讓$(window).load(function(){...})和body.onload()都執行一次的方法，cookie中實現（以body.onload()舉例，$(window).load也能夠照樣該）

function loadpopup(){
if (get_cookie('popped')==''){
//這裏放要執行的代碼，這樣就現實了只執行一次的

document.cookie="popped=yes" ;
}
}
</script>
</head>
<body onload="loadpopup()">

補充2：調試技巧

爲了調試方便，有時候在全部的DOM加載以前調用JS代碼，這個方法是我在調試的時候最喜歡的，有時候開發的時候也用這種方法
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>
對，就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執行，固然也能夠直接嵌入js代碼,這種方式要注意順序問題，以下：
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">

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

        alert($("#test").html());//I Can't display the content
            </script>
    <div id="test">this is the content</div>
</body>
上面兩段代碼,第二段代碼當中由於只能解釋到當前代碼以前的DOM,而test並不存在於已經解析的DOM中.因此第二段代碼沒法正確顯示

補充3：非jquery中無$(document).ready方法

在 W3C 中有個叫 DOMContentLoaded 的事件, 故名思意, 它會在 DOM (文檔對象模型) 被加載完成的時候觸發. 那麼咱們就能夠經過下面的方法調用初始化腳本的方法了.

但很遺憾, 如今不少瀏覽器並不玩 W3C 這一套, 支持 DOMContentLoaded 事件的只有 Firefox, Opera 9 等一些 "現代" 瀏覽器, 而被集成到兩大商業桌面系統的 IE 和 Safari 都不支持. 儘管如此, 咱們能夠用別的一些方法進行處理.

方案一：

[html] view plain copy

if (document.addEventListener){ //非ie瀏覽器
document.addEventListener("DOMContentLoaded", init, false);
} else if (document.attachEvent){ //ie瀏覽器
document.onreadystatechange=function(){ if (this.readyState == 'complete') { init(); } }}

方案二：

[html] view plain copy

// 若是支持 W3C DOM2, 則使用 W3C 方法
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
// 若是是 IE 瀏覽器
} else if (/MSIE/i.test(navigator.userAgent)) {
// 建立一個 script 標籤, 該標籤有 defer 屬性, 當 document 加載完畢時纔會被載入
document.write('<script id="__ie_onload" defer src="javascript:void(0)"></script>');
var script = document.getElementById("__ie_onload");
// 若是文檔確實裝載完畢, 調用初始化方法
script.onreadystatechange = function() {
if (this.readyState == 'complete') {
init();
}
}
// 若是是 Safari 瀏覽器
} else if (/WebKit/i.test(navigator.userAgent)) {
// 建立定時器, 每 0.01 秒檢驗一次, 若是文檔裝載完畢則調用初始化方法
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init();
}
}, 10);
// 若是以上皆不是, 使用最壞的方法 (本例中, Opera 7 將會跑到這裏來)
} else {
window.onload = function(e) {
init();
}
}