本文实例讲述了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，效果比较明显，确实消除了闪烁。那么它的原理呢？每张图片的显示都分为两个步骤：
