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 相关文章推荐
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
javascript验证form表单数据的案例详解
Mar 25 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
详解vue中axios的封装
2018/07/18 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Django REST framework 分页的实现代码
2019/06/19 Python
flask框架路由常用定义方式总结
2019/07/23 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python 日志 logging模块详细解析
2020/03/31 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
Jar包的作用是什么
2014/03/30 面试题
写演讲稿要注意的六件事
2014/01/14 职场文书
预备党员承诺书
2014/03/25 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
优秀护士事迹材料
2014/12/25 职场文书