快捷導(dǎo)航

js圖片預(yù)加載示例

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

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

js圖片預(yù)加載簡(jiǎn)單示例

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);

另一個(gè)詳細(xì)詳解示例

通過(guò)js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入，我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。
看個(gè)例子：

復(fù)制代碼代碼如下:

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

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

稍微修改下：

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

<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)過(guò)以上測(cè)試，可以看出一些不同點(diǎn)，對(duì)于 complete 屬性來(lái)講，IE是根據(jù)圖片是否顯示過(guò)來(lái)判斷，就是說(shuō)當(dāng)加載的圖片顯示出來(lái)后，
complete 屬性的值才為 true ，否則一直是 false ，和以前是否加載過(guò)該張圖片沒(méi)有關(guān)系，即和緩存沒(méi)有關(guān)系！
但是其它瀏覽器表現(xiàn)出來(lái)的確不一樣，只要以前加載過(guò)該圖，瀏覽器有緩存，complete 就為 true ，
這和IE的 readyState 屬性的表現(xiàn)一致！
至此，可以肯定的是所有的瀏覽器都會(huì)緩存圖片！可是上面的問(wèn)題到底是什么原因?qū)е碌哪兀?BR>眾所周知，從緩存里加載東西的速度是很快的，那么在

復(fù)制代碼代碼如下:

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

的過(guò)程中，難道 IE、Opera 加載的速度快到，來(lái)不及追加事件？

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

復(fù)制代碼代碼如下:

<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)加載過(guò)圖片的角度講，IE、Opera表現(xiàn)正常，complete 始終為 false ；
IE的 readyState 始終為uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初
new Imgttmt() 的時(shí)候 Imgttmt.complete 值為 false。而之后 Imgttmt.complete 值就一直為 true 了！如果換一張從來(lái)沒(méi)有加載過(guò)的圖片，
FF和Chrom 的行為就一致了，都是一開(kāi)始加載時(shí)， Imgttmt.complete 值為false，之后為 true！

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

您可能感興趣的文章: