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程序设计有所帮助。