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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
WEEX环境搭建与入门详解
Oct 16 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
推荐:极酷右键菜单
2006/11/29 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
大学毕业生通用自我评价
2014/01/05 职场文书
工地安全生产标语
2014/06/06 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
在职证明书模板
2015/06/15 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Python学习之迭代器详解
2022/04/01 Python