js圖片預加載示例

更新時間：2014年04月30日 12:00:31 作者：

這篇文章主要介紹了js圖片預加載示例,需要的朋友可以參考下

js圖片預加載簡單示例

function loadImage(url, callback) {
    if(url!='null') {
        var img = new Image();
        img.src = url;
        if(img.complete) {
            callback(img);
        } else {
            img.onload = function(){
                img.onload = null;
                callback(img);
            } 
        }
    } 
}

loadImage(pic_url,loadImage);

另一個詳細詳解示例

通過js操縱DOM很多情況下都是為了實現(xiàn)和當前頁html元素的異步載入，我談談對Image對象的一些認識。
看個例子：

復制代碼代碼如下:

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
    }
//-->
</script>

當包含上述代碼的頁面打開時并不載入 “tt.jpg” ，當點擊按鈕時候才載入。當載入完成后觸發(fā)onload事件顯示到頁面上。
如果你是第一次加載 “tt.jpg" 這張圖片的話，運行正常。點擊按鈕加載并顯示一張圖片，如果重復點擊會怎么樣呢？
IE、Opera中，除了第一次加載圖片時候顯示正常，之后再點擊就沒有反應了，刷新也一樣。難道它們只觸發(fā)一次 ”onload“ 事件？是緩存機制？
FF、Chrom中，每點擊一次加載一張該圖片。

稍微修改下：

復制代碼代碼如下:

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

運行后發(fā)現(xiàn)，奇怪的事情發(fā)生了。所有的瀏覽器都一致了，都是每點擊一次加載一張圖片。這又是什么原因？
由此可以見 IE、Opera 執(zhí)行過程中并不是只觸發(fā)一次 onload 事件！

聯(lián)想一下 Image 對象的一些屬性看看，complete、readyState(IE專屬值[uninitialized,complete]) （為防止緩存影響效果請更換圖片名稱！）

復制代碼代碼如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
    var Img;
    function addImg(isrc)
    {
        Img = new Image();
        //Img.src = isrc;
        Img.onload = function ()
        {
            alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
            document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

經(jīng)過以上測試，可以看出一些不同點，對于 complete 屬性來講，IE是根據(jù)圖片是否顯示過來判斷，就是說當加載的圖片顯示出來后，
complete 屬性的值才為 true ，否則一直是 false ，和以前是否加載過該張圖片沒有關系，即和緩存沒有關系！
但是其它瀏覽器表現(xiàn)出來的確不一樣，只要以前加載過該圖，瀏覽器有緩存，complete 就為 true ，
這和IE的 readyState 屬性的表現(xiàn)一致！
至此，可以肯定的是所有的瀏覽器都會緩存圖片！可是上面的問題到底是什么原因導致的呢？
眾所周知，從緩存里加載東西的速度是很快的，那么在

復制代碼代碼如下:

Img.src = isrc;
Img.onload = ...

的過程中，難道 IE、Opera 加載的速度快到，來不及追加事件？

這回加載一張根本不存在的圖片看看效果：

復制代碼代碼如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
    var Imgttmt;
    function addImg(isrc)
    {
        Imgttmt = new Image();
        Imgttmt.src = isrc;
        alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
        Imgttmt.onload = function ()
        {
            alert("impossible")
        }
    }
//-->
</script>

可以肯定的是所有瀏覽器都不觸發(fā) onload 事件。從是否緩存或已經(jīng)加載過圖片的角度講，IE、Opera表現(xiàn)正常，complete 始終為 false ；
IE的 readyState 始終為uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初
new Imgttmt() 的時候 Imgttmt.complete 值為 false。而之后 Imgttmt.complete 值就一直為 true 了！如果換一張從來沒有加載過的圖片，
FF和Chrom 的行為就一致了，都是一開始加載時， Imgttmt.complete 值為false，之后為 true！

測試的過程中還發(fā)現(xiàn)，腳本的執(zhí)行順序的確會影響到類似于 onload 等事件的追加，如果在其顯示后在追加事件就沒有什么實際意義了！
基于 javascript 這種解釋性語言的特性，在追加事件的時候一定要注意把事件追加在觸發(fā)該事件的句柄之前。

您可能感興趣的文章: