本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
