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