资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

ajax如何异步加载图片

这篇文章主要为大家展示了“ajax如何异步加载图片”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ajax如何异步加载图片”这篇文章吧。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的庄河网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

具体如下:

图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效)。如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的。

联系时下比较热门的,号称“无”刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动态插入到“前台”的HTML页面上。应该可以满足需求,不过XMLHttpRequest对象返回的对象只有两个属性responseXML和responseText,前者是XML对象,后者是返回的纯文本内容,似乎没有图片所需要的二进制数据...退一步,即使能用responseText取回图片的二进制数据,我们又如何能够将它插入到前台页面呢?将img的src属性换成请求的url?

说干就干,写个图像幻灯片的代码来验证自己的想法:


    
        Image Slide
        
    
    
        
        
    

以上代码以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脚本用来传送所请求的图片:

果真不出所料,又出现了闪烁...

看来还需要另想办法,闭门造车是行不通了,求助google这位百事通先生吧!功夫不负有心人,终于还是被我找到了,欣喜归欣喜,结果还是让我大跌眼镜,img竟然有onload的事件回调接口,只能庆幸自己的眼镜是树脂的了,"眼镜掉了我不怕不怕啦,不怕不怕不怕啦..."

还等啥,当然是代码伺候了:


    
        Image Slide
        
    
    
        
        
    

"She is an ungly girl!"没啥好说的,不可缓存的图像的情况:

i ++;
        window.setTimeout("displayImage();", 1000);
    }
 img.src = "./" + i + ".jpg";
 img.src = "./image.php?filename=" + i + ".jpg";
 }
    

以上是“ajax如何异步加载图片”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站题目:ajax如何异步加载图片
浏览地址:http://www.cdkjz.cn/article/jciced.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220