图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效)。如果是通过定时更换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>