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中最常用的55个经典小技巧
Nov 29 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
redux.js详解及基本使用
May 24 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue中监听返回键问题
Aug 28 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 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中for循环语句的几种变型
2006/11/26 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PDO::errorCode讲解
2019/01/28 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python模拟事件触发机制详解
2018/01/19 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python访问hdfs的操作
2020/06/06 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
火山动力Java笔试题
2014/06/26 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
年终总结会议主持词
2014/03/17 职场文书
学生手册评语
2014/05/05 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
监护人证明
2015/06/19 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书