ajax非同步載入圖片執行個體分析_AJAX相關

來源:互聯網
上載者:User

本文執行個體講述了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('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毫秒為時間間隔迴圈顯示圖片0.jpg - 10.jpg,效果比較明顯,確實消除了閃爍。那麼它的原理呢?每張圖片的顯示都分為兩個步驟:
用XMLHttpRequest對象從伺服器擷取映像,緩衝映像到本地的瀏覽器緩衝區。
從本地的瀏覽器緩衝區取得映像進行顯示。
因為在第二步從取圖片到顯示的時間很短,所以使用者基本上覺察不出任何閃爍。可見,以上技術基於所請求的映像是可快取的的假設,如果映像是不可快取的,是不是以上代碼就不能正常工作了呢?

還是讓代碼來說話,把以上代碼做些更改:

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"]);?>

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

看來還需要另想辦法,閉門造車是行不通了,求助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 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相關內容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結》、《JavaScript中ajax操作技巧總結》及《PHP+ajax技巧與應用小結》。

希望本文所述對大家ajax程式設計有所協助。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。