$(window).load(function() {})和$(document).ready(function(){})的區別

轉載來源：http://blog.csdn.net/jallin2001/article/details/6600311

在我以前的開發中，一般用到javascript，我都是採用jquery的模式，也就是大多數時候，第一行寫的是：

$(document).ready(function(){

...

});

這個時候，不一定要等所有的js和圖片加載完畢，就可以執行一些方法，不過有些時候，必須要等所有的

元素都加載完畢，纔可以執行一些方法的時候，比如說，部分圖片或者什麼其他方面還沒有加載好，這個時候，點擊某些按鈕，會導致出現意外的情況，這個時候，就

需要用到:

$(window).load(function() {

$("#btn-upload").click(function(){ //比如說：
uploadPhotos();
});

});

下面是轉載的內容，

首先它們都是在頁面所有元素(包括html標籤以及引用到得所有圖片,Flash等媒體)加載完畢後執行的,這是它們的共同點.

不用body.Onload()理由1：

如果我們想同時加載多個函數,我們必須這樣寫

<body onload="fn1(),fn2()"></body>看起來極其醜陋,如果用$(window).load()我們可以這樣加載多個函數

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

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

不用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>

呵呵,有時候我們也有這個需求!

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.