本文實例講述了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，效果比較明顯，確實消除了閃爍。那么它的原理呢？每張圖片的顯示都分為兩個步驟：
新聞熱點
疑難解答
圖片精選
