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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js调用css属性写法
Sep 21 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
angular6 填坑之sdk的方法
Dec 27 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
php服务器的系统详解
2019/10/12 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
Python实现队列的方法
2015/05/26 Python
python实现中文分词FMM算法实例
2015/07/10 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python使用turtle库绘制时钟
2020/03/25 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
VC++笔试题
2014/10/13 面试题
消防安全检查制度
2014/02/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
家长学校培训材料
2014/08/20 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Node.js实现断点续传
2021/06/23 Javascript
利用Apache Common将java对象池化的问题
2022/06/16 Servers
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL