ajax如何異步加載圖片-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“ajax如何異步加載圖片”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ajax如何異步加載圖片”這篇文章吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比巫山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式巫山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋巫山地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

具體如下：

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

聯(lián)系時下比較熱門的，號稱“無”刷新的AJAX技術(shù)，利用XMLHttpRequest對象發(fā)起異步請求，待圖像加載完畢再動態(tài)插入到“前臺”的HTML頁面上。應(yīng)該可以滿足需求，不過XMLHttpRequest對象返回的對象只有兩個屬性responseXML和responseText，前者是XML對象，后者是返回的純文本內(nèi)容，似乎沒有圖片所需要的二進制數(shù)據(jù)...退一步，即使能用responseText取回圖片的二進制數(shù)據(jù)，我們又如何能夠?qū)⑺迦氲角芭_頁面呢？將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('text/xml');
        }
    } 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('GET', url, true);
    httpRequest.send('');
}
var i = 0;
var max_i = 10;
function displayImage()
{
    var url = "./" + i + ".jpg";
    makeAsyncRequest(url, function (url) {
        var div = document.getElementById("image");
        var img = div.getElementsByTagName("img");
        if (img.length == 0) {
            img = document.createElement("img");
            while (div.childNodes.length > 0)
                div.removeChild(div.childNodes[0]);
            div.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();">
        <div id="image">
        </div>
    </body>
</html>

以上代碼以1000毫秒為時間間隔循環(huán)顯示圖片0.jpg - 10.jpg，效果比較明顯，確實消除了閃爍。那么它的原理呢？每張圖片的顯示都分為兩個步驟：
用XMLHttpRequest對象從服務(wù)器獲取圖像，緩存圖像到本地的瀏覽器緩沖區(qū)。
從本地的瀏覽器緩沖區(qū)取得圖像進行顯示。
因為在第二步從取圖片到顯示的時間很短，所以用戶基本上覺察不出任何閃爍?？梢?，以上技術(shù)基于所請求的圖像是可緩存的的假設(shè)，如果圖像是不可緩存的，是不是以上代碼就不能正常工作了呢？

還是讓代碼來說話，把以上代碼做些更改：

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

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

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

果真不出所料，又出現(xiàn)了閃爍...

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

還等啥，當(dāng)然是代碼伺候了:

<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 div = document.getElementById("image");
        while (div.childNodes.length > 0)
            div.removeChild(div.childNodes[0]);
        div.appendChild(img);
        if (i == max_i)
            i = 0;
        else
            i ++;
        window.setTimeout("displayImage();", 1000);
    }
    img.src = "./" + i + ".jpg";
}
        </script>
    </head>
    <body onload="displayImage();">
        <div id="image">
        </div>
    </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如何異步加載圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：ajax如何異步加載圖片-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.muchs.cn/article16/piogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、域名注冊、定制網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)