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中的类继承
Nov 25 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
vue中如何使用ztree
Feb 06 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 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获取网卡地址的代码
2008/04/09 PHP
PHP 远程关机实现代码
2009/11/10 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
TensorFlow实现创建分类器
2018/02/06 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
求职信范文怎么写
2014/01/29 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
关于安全的标语
2014/06/10 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript