大多數jQuery實例或教程都告訴我們綁定我們的jQuery代碼到$(document).ready事件。雖然$(document).ready 事件在大多數情況下都OK,但是它的解析順序是在文檔准備就緒,但文檔中的圖片等對象正在下載的時候開始運行的。所以在某些時候使 用$(document).ready事件並不一定能達到我們預期的效果,比如一些視覺效果和動畫、拖拽、預讀取隱藏圖片等…通過使 用$(window).load事件便可以安全的在整個文檔都准備就緒之后再開始運行你期望的代碼。
$(window).load(function(){
// 將你希望在頁面完全就緒之后運行的代碼放在這里
});
jquery $(document).ready() 與window.onload的區別
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。
2.編寫個數不同
window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個
$(document).ready()可以同時編寫多個,並且都可以得到執行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
用$(window).load(function(){...})而不用body.onload()的幾個理由
首先它們都是在頁面所有元素(包括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代碼
<script type="text/javascript"> (function() { alert("DOM還沒加載哦!"); })(jQuery) </script>
jquery的$(window).load和原生js的window.onload的使用方法:
$(window).load(function() { //jquery代碼 });
window.onload=function(){ var obj=document.getElementById("TableA").getElementsByTagName("td"); if(!obj){return false} for(var i=0;i<obj.length;i++){ obj[i].onfocus=function(){this.style.background="#ff0000"} obj[i].onblur=function(){this.style.background="";} } }