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 相关文章推荐
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php批量删除操作代码分享
2017/02/26 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
2014村务公开实施方案
2014/02/25 职场文书
英语故事演讲稿
2014/04/29 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
运动会广播稿300字
2015/08/19 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python