AJax技术

JQuery实现Ajax加载图片的方法

字号+ 作者:H5之家 来源:H5之家 2016-02-24 17:01 我要评论( )

本文实例讲述了JQuery实现Ajax加载图片的方法。分享给大家供大家参考,具体如下:最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览。最先想到的思路是利用

本文实例讲述了JQuery实现Ajax加载图片的方法。分享给大家供大家参考,具体如下:

最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览。

最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来。

页面元素:

<input type="button" value="Next" /> <div>正在加载……</div> <div> <img /> </div>

按钮的事件绑定:

$(".picbtn").click(function(){NextPic();});

定义了一个数组PicArr用来记录所有图片

NextPic内容:

$(".tip").slideDown(200); //显示提示 $.get(PicArr[CurrPic],function(){ $("img").attr("src",PicArr[CurrPic]); $(".tip").slideUp(200); CurrPic++; if(CurrPic>4) CurrPic=0; });

在CHROME和FF下显示正常,IE6下异常,IE7、8未测试。

后来在ASPRAIN的开发者 稽山草 的帮助下,思路改成了先改src,然后绑定onload事件,在