JQuery实现Ajax加载图片的方法


Posted in Javascript onDecember 24, 2015

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

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

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

页面元素:

<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<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事件,在onload中回调。

核心代码:

$("img").attr("src",PicArr[CurrPic]) 
.bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});

后来一看基本正常了,但是仔细看还是不正常,图片顺序开始乱跳,跟踪了好久发现回调函数会多次运行。

中间想到会不会是事件绑定的问题,因为onclick事件的绑定是

$(Element).bind("click",callback)
可以简写成
$(Element).click(callback)
想到$(Element).bind("load",callback)和$(Element).load(url,callback)会不会是一样,查资料写得都不怎么清楚,改了试一下,还是不一样,不过在chrome和ff下依然能工作,但是数据不太正常,IE下报错。

再次检查 稽山草 给的代码,发现问题在哪了。

load事件的绑定的是一个匿名函数,而当按钮按下时会再次绑定,所以会重复执行。于是将绑定bind改成one搞定。最终完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQUERY动态加载图片</title>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
(function($){
$.NextPic=function()
{
$(".tip").slideDown(200);
$("img").attr("src",PicArr[CurrPic]).one('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
//$("img").load(PicArr[CurrPic],function(){$(this).attr("src",PicArr[CurrPic]);$(".tip").slideUp(200);alert(CurrPic);CurrPic++;if(CurrPic>4)CurrPic=0;});
}
})(jQuery);
$(document).ready(function(){
PicArr = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
CurrPic=0;
$(".tip").css({"position":"absolute","top":"100px","left":"50px"});
$(".tip").hide();
$(".scoll").click(function(){$.NextPic();});
})
</script>
</head>
<body>
<input class="picbtn" type="button" value="Next" />
<div class="tip">正在加载……</div>
<div class="notice">
<img id="img"/>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
javascript中clone对象详解
Dec 03 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
原生JS实现分页
Apr 19 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 #Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 #Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PHP实现百度人脸识别
2019/05/06 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
浅述python中深浅拷贝原理
2018/09/18 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Django model select的多种用法详解
2019/07/16 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
自我鉴定范文300字
2013/10/01 职场文书
经典演讲稿范文
2013/12/30 职场文书
硕士学位论文评语
2014/12/31 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
关于Vue中的options选项
2022/03/22 Vue.js