在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:
$(document).ready(fn)與$(window).load(fn)二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，
而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。
我 寫了一段示範程式突顯二者的區別。由於Sky_angmap_4.jpg是一張1.2MB的大型圖檔，實際執行時，可以觀察到 “ready event!” –> 圖檔緩慢顯現 -> "load event!”的過程。(嫌下載時間太短，差別不夠明顯的話，可以試試Sky_angmap_7.jpg，XD)
排版顯示純文字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"> </script>
<script type="text/javascript">
$(function() {
alert("ready event!");
});
$(window).load(function() {
alert("load event!");
});
</script>
</head>
<body>
<img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>
$(window).load(fn)適合執行一些要等待圖檔或元素全部載入才可進行的動作，例如: 檢查圖檔長寬。換句話說，上回的大圖自動縮小Script可以透過$(window).load(fn)改寫得更簡單，完全不用擔心圖檔沒下載完成時的特殊處理，算是一個很好的應用範例。
排版顯示純文字
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined')
window.setTimeout(GM_wait,100);
else
{
$ = unsafeWindow.jQuery;
$(window).load(resizeHugeImage);
}
}
GM_wait();
// All your GM code must be inside this function
function resizeHugeImage() {
$("img").each(function() {
var img = $(this);
var w = img.width(), h = img.height();
var longSide = (w > h ? w : h);
//...以下省略...
轉載自:http://blog.darkthread.net/post-2009-06-05-jquery-ready-vs-load.aspx
沒有留言:
張貼留言