jQuery ready vs load

jQuery ready vs load

在使用Javascript操作HTML DOM時,記得要養成網頁載入後才動手的好習慣,不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片,在5分02秒的示範)

在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>


一般來說,等網頁全部元素都載入才執行程式時機有點晚,因為在此之前,使用者已經可以點選操作網頁,跳脫我們程式的掌控範圍。因此,我們幾乎都是將 程式放在$(document).read(function() { ... })中(即$(function() { … }))。

$(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);
    //...以下省略...