ajax异步加载图片实例分析
本文实例讲述了ajax异步加载图片的方法。分享给大家供大家参考，具体如下：
图片一般比较大，所以他们都是在基本网页加载后才逐渐加载上的，整个加载的过程非常不雅观，或者是从模糊逐渐变清晰，或者是从上往下拓展开（当然你也可以认为这些都是不错的特效）。如果是通过定时更换img的src属性来实现图片的动态更换，由此带来的闪烁更让它难以接受，这可不是用alt属性就能让人愉快的。
联系时下比较热门的，号称“无”刷新的AJAX技术，利用XMLHttpRequest对象发起异步请求，待图像加载完毕再动态插入到“前台”的HTML页面上。应该可以满足需求，不过XMLHttpRequest对象返回的对象只有两个属性responseXML和responseText，前者是XML对象，后者是返回的纯文本内容，似乎没有图片所需要的二进制数据...退一步，即使能用responseText取回图片的二进制数据，我们又如何能够将它插入到前台页面呢？将img的src属性换成请求的url？
说干就干，写个图像幻灯片的代码来验证自己的想法：
<html>
<head>
<title>ImageSlide</title>
<script>
functionmakeAsyncRequest(url,callback)
{
varhttpRequest;
if(window.XMLHttpRequest){//Mozilla,Safari,...
httpRequest=newXMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}elseif(window.ActiveXObject){//IE
try{
httpRequest=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
httpRequest=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
httpRequest.onreadystatechange=function(){
if(httpRequest.readyState==4
&&httpRequest.status==200)
callback(url);
};
httpRequest.open('GET',url,true);
httpRequest.send('');
}
vari=0;
varmax_i=10;
functiondisplayImage()
{
varurl="./"+i+".jpg";
makeAsyncRequest(url,function(url){
vardiv=document.getElementById("image");
varimg=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>
<bodyonload="displayImage();">
<divid="image">
</div>
</body>
</html>
以上代码以1000毫秒为时间间隔循环显示图片0.jpg-10.jpg，效果比较明显，确实消除了闪烁。那么它的原理呢？每张图片的显示都分为两个步骤：
用XMLHttpRequest对象从服务器获取图像，缓存图像到本地的浏览器缓冲区。
从本地的浏览器缓冲区取得图像进行显示。
因为在第二步从取图片到显示的时间很短，所以用户基本上觉察不出任何闪烁。可见，以上技术基于所请求的图像是可缓存的的假设，如果图像是不可缓存的，是不是以上代码就不能正常工作了呢？
还是让代码来说话，把以上代码做些更改：
functiondisplayImage()
{
varurl="./"+i+".jpg";
varurl="./image.php?filename="+i+".jpg";
makeAsyncRequest(url,function(url){
vardiv=document.getElementById("image");
varimg=div.getElementsByTagName("img");
再写一个php脚本用来传送所请求的图片：
<?php
header("Content-Type:image/jpeg");
header("Cache-Control:no-cache");
echofile_get_contents($_GET["filename"]);
?>
果真不出所料，又出现了闪烁...
看来还需要另想办法，闭门造车是行不通了，求助google这位百事通先生吧！功夫不负有心人，终于还是被我找到了，欣喜归欣喜，结果还是让我大跌眼镜，img竟然有onload的事件回调接口，只能庆幸自己的眼镜是树脂的了，"眼镜掉了我不怕不怕啦，不怕不怕不怕啦..."
还等啥，当然是代码伺候了:
<html>
<head>
<title>ImageSlide</title>
<script>
vari=0;
varmax_i=10;
functiondisplayImage()
{
varimg=document.createElement("img");
img.onload=function(){
vardiv=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>
<bodyonload="displayImage();">
<divid="image">
</div>
</body>
</html>
"Sheisanunglygirl!"没啥好说的，不可缓存的图像的情况：
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程序设计有所帮助。