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 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
Jquery ajax基础教程
Nov 20 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php算法实例分享
2015/07/14 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python实现进程间通信简单实例
2014/07/23 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python Cookie 读取和保存方法
2018/12/28 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
文明班级建设方案
2014/05/15 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技