本文實(shí)例講述了ajax異步加載圖片的方法。分享給大家供大家參考，具體如下：
圖片一般比較大，所以他們都是在基本網(wǎng)頁(yè)加載后才逐漸加載上的，整個(gè)加載的過(guò)程非常不雅觀，或者是從模糊逐漸變清晰，或者是從上往下拓展開(kāi)（當(dāng)然你也可以認(rèn)為這些都是不錯(cuò)的特效）。如果是通過(guò)定時(shí)更換img的src屬性來(lái)實(shí)現(xiàn)圖片的動(dòng)態(tài)更換，由此帶來(lái)的閃爍更讓它難以接受，這可不是用alt屬性就能讓人愉快的。
聯(lián)系時(shí)下比較熱門的，號(hào)稱“無(wú)”刷新的AJAX技術(shù)，利用XMLHttpRequest對(duì)象發(fā)起異步請(qǐng)求，待圖像加載完畢再動(dòng)態(tài)插入到“前臺(tái)”的HTML頁(yè)面上。應(yīng)該可以滿足需求，不過(guò)XMLHttpRequest對(duì)象返回的對(duì)象只有兩個(gè)屬性responseXML和responseText，前者是XML對(duì)象，后者是返回的純文本內(nèi)容，似乎沒(méi)有圖片所需要的二進(jìn)制數(shù)據(jù)...退一步，即使能用responseText取回圖片的二進(jìn)制數(shù)據(jù)，我們又如何能夠?qū)⑺迦氲角芭_(tái)頁(yè)面呢？將img的src屬性換成請(qǐng)求的url？
說(shuō)干就干，寫(xiě)個(gè)圖像幻燈片的代碼來(lái)驗(yàn)證自己的想法：
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毫秒為時(shí)間間隔循環(huán)顯示圖片0.jpg - 10.jpg，效果比較明顯，確實(shí)消除了閃爍。那么它的原理呢？每張圖片的顯示都分為兩個(gè)步驟：
用XMLHttpRequest對(duì)象從服務(wù)器獲取圖像，緩存圖像到本地的瀏覽器緩沖區(qū)。
從本地的瀏覽器緩沖區(qū)取得圖像進(jìn)行顯示。
因?yàn)樵诘诙綇娜D片到顯示的時(shí)間很短，所以用戶基本上覺(jué)察不出任何閃爍。可見(jiàn)，以上技術(shù)基于所請(qǐng)求的圖像是可緩存的的假設(shè)，如果圖像是不可緩存的，是不是以上代碼就不能正常工作了呢？
還是讓代碼來(lái)說(shuō)話，把以上代碼做些更改：
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");
再寫(xiě)一個(gè)php腳本用來(lái)傳送所請(qǐng)求的圖片：
?php
header("Content-Type: image/jpeg");
header("Cache-Control: no-cache");
echo file_get_contents($_GET["filename"]);
?>
果真不出所料，又出現(xiàn)了閃爍...
看來(lái)還需要另想辦法，閉門造車是行不通了，求助google這位百事通先生吧！功夫不負(fù)有心人，終于還是被我找到了，欣喜歸欣喜，結(jié)果還是讓我大跌眼鏡，img竟然有onload的事件回調(diào)接口，只能慶幸自己的眼鏡是樹(shù)脂的了，"眼鏡掉了我不怕不怕啦，不怕不怕不怕啦..."
還等啥，當(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!"沒(méi)啥好說(shuō)的，不可緩存的圖像的情況：
i ++;
window.setTimeout("displayImage();", 1000);
}
img.src = "./" + i + ".jpg";
img.src = "./image.php?filename=" + i + ".jpg";
}
/script>
/head>
讀到這里，你應(yīng)該知道哪個(gè)是歪門邪道，哪個(gè)是人間正道了吧？
更多關(guān)于Ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《JavaScript中ajax操作技巧總結(jié)》及《PHP+ajax技巧與應(yīng)用小結(jié)》。
希望本文所述對(duì)大家ajax程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- 使用加載圖片解決在Ajax數(shù)據(jù)加載中頁(yè)面出現(xiàn)短暫空白的問(wèn)題(推薦)
- JQuery實(shí)現(xiàn)Ajax加載圖片的方法
- jQuery 瀑布流 絕對(duì)定位布局（二）(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動(dòng)布局（一）(延遲AJAX加載圖片)
- 代碼實(shí)例ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片
