快捷導(dǎo)航

JavaScript進階教程(第四課第一部分)

更新時間：2007年04月05日 00:00:00 作者：

在以前的課程中，我們學習了對文本和字符串的各種操作，今天我們專注于兩種不同的數(shù)據(jù)類型：圖象和對象。學完這一課，你將知道如何：
    使用JavaScript來加速圖象交換。
    創(chuàng)建你自己的對象來使腳本易于理解。
    使用關(guān)聯(lián)數(shù)組來快速存取腳本中的每一個對象。
    使用JavaScript做圖象變換的一個主要問題是，它直到需要換圖時才去告訴瀏覽器下載那張圖象。如果你有一張大的圖象，想在鼠標滑過一副圖象時調(diào)出來，瀏覽器得臨時下載這張圖，這可能會花一定時間從而使滑動效果大打折扣。
    如果你的連接速度較慢，而你要調(diào)入的是一個相當大的圖象的話，那你把鼠標放到圖上后只好去等待。由于有的瀏覽器要求被調(diào)入的圖象必須保存在緩沖區(qū)里，所以有時你可能根本就看不到圖象變換的效果。為了避免這些煩心的問題，我們可以把要變換的圖象在頁面調(diào)入時就預(yù)先裝載。
    在Web編程時，預(yù)裝載是在需要圖片之前就將圖片下載到緩存的技術(shù)。采用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復(fù)回來并立即顯示。
    預(yù)裝載圖象其實并不困難。你要做的就是創(chuàng)建一個新的image對象，然后把要預(yù)裝的圖象名設(shè)定成image的src屬性，如下所示：
    var an_image = new Image();
    an_image.src = "my_nice_image.gif";
    通過設(shè)置image的src屬性就可以自動地把圖象下載到你的硬盤里（當然假設(shè)你的cache可以用），然后圖象變換時就從硬盤直接讀入圖象而不用再去下載了。
    剩下要做的唯一一件事就是，怎樣在頁面被下載以后和圖象變換操作之前使預(yù)裝圖象發(fā)生。讓人愉快的是這很簡單。HTML中的body標記有一個事件處理器叫onLoad，當頁面被調(diào)入后它將被調(diào)用。如果你的body標記是這樣的：
    <body onLoad="doPreload();">
    那么doPreload()函數(shù)將在網(wǎng)頁下載后被調(diào)用。函數(shù)的代碼是這樣的：
    function doPreload()
    {
        var the_images = new Array(’kwmatt.jpg’,’matbon.jpg’,’lunchMat.jpg’);
        preloadImages(the_images);
    }
    function preloadImages(the_images_array) {
        for(loop = 0; loop < the_images_array.length; loop++)
        {
            var an_image = new Image();
            an_image.src = the_images_array[loop];
        }
    }
    doPreload()函數(shù)創(chuàng)建了需要預(yù)裝的圖象名的數(shù)組，并把數(shù)組作為參數(shù)傳送到preloadImages()函數(shù), preloadImages()函數(shù)包含了一個循環(huán)，每次循環(huán)都創(chuàng)建一個新的圖象對象，并把圖象名設(shè)到它的src屬性中。
    不很難吧？圖象對象相當有用對吧？我很高興你這樣想，休息一會兒，馬上我們就要進入一個更令人興奮，更讓人動腦筋的話題：創(chuàng)建你自己的對象。

您可能感興趣的文章: