首頁 > 文章 > web前端 > ajax異步載入圖片實例分析

ajax異步載入圖片實例分析

亚连原創: 2018-05-24 10:48:582273瀏覽

這篇文章主要介紹了ajax異步加載圖片的方法,結合實例形式較為詳細的分析了ajax圖片異步加載的原理與相關實現技巧,需要的朋友可以參考下

本文實例講述了ajax異步載入圖片的方法。分享給大家供大家參考，具體如下：

圖片一般比較大，所以他們都是在基本網頁加載後才逐漸加載上的，整個加載的過程非常不雅觀，或者是從模糊逐漸變清晰，或是從上往下拓展開（當然你也可以認為這些都是不錯的特效）。如果是透過定時更換img的src屬性來實現圖片的動態更換，由此帶來的閃爍更讓它難以接受，這可不是用alt屬性就能讓人愉快的。

聯繫時下比較熱門的，號稱「無」刷新的AJAX技術，利用XMLHttpRequest物件發起非同步請求，待圖片載入完畢再動態插入到「前台」的HTML頁面上。應該可以滿足需求，不過XMLHttpRequest物件返回的物件只有兩個屬性responseXML和responseText，前者是XML對象，後者是返回的純文字內容，似乎沒有圖片所需要的二進位資料...退一步，即使能用responseText取回圖片的二進位數據，我們又如何能夠將它插入到前台頁面呢？將img的src屬性換成請求的url？

說乾就乾，寫個圖像幻燈片的程式碼來驗證自己的想法：

<html>
    <head>
        <title>Image Slide</title>
        <script>
function makeAsyncRequest(url, callback)
{
    var httpRequest;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType) {
            httpRequest.overrideMimeType(&#39;text/xml&#39;);
        }
    } else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4
                && httpRequest.status == 200)
            callback(url);
    };
    httpRequest.open(&#39;GET&#39;, url, true);
    httpRequest.send(&#39;&#39;);
}
var i = 0;
var max_i = 10;
function displayImage()
{
    var url = "./" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var p = document.getElementById("image");
        var img = p.getElementsByTagName("img");
        if (img.length == 0) {
            img = document.createElement("img");
            while (p.childNodes.length > 0)
                p.removeChild(p.childNodes[0]);
            p.appendChild(img);
        } else
            img = img.item(0);
        img.src = url;
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    });
}
        </script>
    </head>
    <body onload="displayImage();">
        <p id="image">
        </p>
    </body>
</html>

以上程式碼以1000毫秒為時間間隔循環顯示圖片0.jpg - 10.jpg，效果比較明顯，確實消除了閃爍。那麼它的原理呢？每張圖片的顯示都分為兩個步驟：
用XMLHttpRequest物件從伺服器取得影像，快取影像到本機的瀏覽器緩衝區。
從本機的瀏覽器緩衝區取得影像進行顯示。
因為在第二步驟從取圖片到顯示的時間很短，所以使用者基本上覺察不出任何閃爍。可見，以上技術基於所請求的映像是可快取的的假設，如果映像是不可快取的，是不是以上程式碼就不能正常運作了呢？

還是讓程式碼來說話，把以上程式碼做些改變：

function displayImage()
{
 var url = "./" + i + ".jpg";
 var url = "./image.php?filename=" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var p = document.getElementById("image");
        var img = p.getElementsByTagName("img");

再寫一個php腳本用來傳送所要求的圖片：

<?php
    header("Content-Type: image/jpeg");
    header("Cache-Control: no-cache");
    echo file_get_contents($_GET["filename"]);
?>

果真不出所料，又出現了閃爍...

看來還需要另想辦法，閉門造車是行不通了，求助google這位百事通先生吧！功夫不負有心人，終於還是被我找到了，欣喜歸欣喜，結果還是讓我大跌眼鏡，img竟然有onload的事件回調接口，只能慶幸自己的眼鏡是樹脂的了，"眼鏡掉了我不怕啦，不怕不怕不怕啦..."

還等啥，當然是代碼伺候了:

<html>
    <head>
        <title>Image Slide</title>
        <script>
var i = 0;
var max_i = 10;
function displayImage()
{
    var img = document.createElement("img");
    img.onload = function () {
        var p = document.getElementById("image");
        while (p.childNodes.length > 0)
            p.removeChild(p.childNodes[0]);
        p.appendChild(img);
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    }
    img.src = "./" + i + ".jpg";
}
        </script>
    </head>
    <body onload="displayImage();">
        <p id="image">
        </p>
    </body>
</html>

"She is an ungly girl!"沒啥好說的，不可緩存的圖像的狀況：

        i ++;
        window.setTimeout("displayImage();", 1000);
    }
 img.src = "./" + i + ".jpg";
 img.src = "./image.php?filename=" + i + ".jpg";
 }
    </script>
</head>

上面是我整理給大家的，希望今後會對大家有幫助。

AJAX請求佇列實作

#使用ajax非同步提交表單的幾種方法總結

解決AJAX請求中含有陣列的方法

以上是ajax異步載入圖片實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：avalon前端專案中使用解析下一篇：avalon前端專案中使用解析

看更多