[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-dynamic-load-pics-with-jquery":3,"$f3sz7vaq9hbnep":22},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":15,"permalink":16,"excerpt_src":16,"media_type":16,"media_title":16,"media_author":16,"media_url":16,"rating":16,"layout":16,"pv":17,"admin_only":17,"created_at":18,"updated_at":18,"deleted_at":16,"status":19,"html":20,"cover":21},151,"article","dynamic-load-pics-with-jquery","jquery实现ajax加载图片","2010-01-29 22:19:57","web",[11,12,13,14],"JavaScript","jQuery","ajax","加载","\n最近在学习JQuery，想从原理上模拟一下无刷新的相册浏览。\n\n最先想到的思路是利用缓存，也就是先显示提示消息，然后get图片，在get完的时候回调，将img标签的`src`改掉，由于刚刚get过，有了缓存，所以图片会立刻显示出来。\n\n页面元素：\n\n```html\n\u003Cinput class=\"picbtn\" type=\"button\" value=\"Next\" \u002F>\n\u003Cdiv class=\"tip\">正在加载……\u003C\u002Fdiv>\n\u003Cdiv class=\"notice\">\n\t\u003Cimg \u002F>\n\u003C\u002Fdiv>\n```\n\n按钮的事件绑定：\n\n```javascript\n$(\".picbtn\").click(function(){NextPic();});\n```\n\n定义了一个数组PicArr用来记录所有图片。\n\nNextPic内容：\n\n```javascript\n$(\".tip\").slideDown(200);  \u002F\u002F显示提示\t$.get(PicArr[CurrPic],function(){\n\t$(\"img\").attr(\"src\",PicArr[CurrPic]);\n\t$(\".tip\").slideUp(200);\n\tCurrPic++;\n\tif(CurrPic>4)\n\t\tCurrPic=0;\n\t\t});\n};\n```\n\n在CHROME和FF下显示正常，IE6下异常，IE7、8未测试。\n\n后来在ASPRAIN的开发者 稽山草 的帮助下，思路改成了先改src，然后绑定onload事件，在onload中回调。\n\n核心代码：\n\n```javascript\n$(\"img\").attr(\"src\",PicArr[CurrPic])\n\t.bind(load,function(){\n\t\t$(\".tip\").slideUp(200);\n\t\tCurrPic++;\n\t\tif(CurrPic>4)CurrPic=0;\n\t});\n```\n\n后来一看基本正常了，但是仔细看还是不正常，图片顺序开始乱跳，跟踪了好久发现回调函数会多次运行。中间想到会不会是事件绑定的问题，因为`onclick`事件的绑定是`$(Element).bind(\"click\",callback)`，可以简写成`$(Element).click(callback)`，想到`$(Element).bind(\"load\",callback)`和`$(Element).load(url,callback)`会不会是一样，查资料写得都不怎么清楚，改了试一下，还是不一样，不过在chrome和ff下依然能工作，但是数据不太正常，IE下报错。\n\n再次检查 稽山草 给的代码，发现问题在哪了。\n\nload事件的绑定的是一个匿名函数，而当按钮按下时会再次绑定，所以会重复执行。于是将绑定`bind`改成`one`搞定。最终完整代码如下：\n\n```html\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd\">\n\u003Chtml xmlns=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\">\n\u003Chead>\n\t\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=gb2312\" \u002F>\n\t\u003Ctitle>JQUERY动态加载图片\u003C\u002Ftitle>\n\t\u003Cscript type=\"text\u002Fjavascript\" src=\"jquery\u002Fjquery-1.3.2.min.js\">\u003C\u002Fscript>\n\t\u003Cscript type=\"text\u002Fjavascript\">\n\t\t(function($){\n\t\t\t$.NextPic=function(){\n\t\t\t\t$(\".tip\").slideDown(200);\n\t\t\t\t$(\"img\").attr(\"src\",PicArr[CurrPic]).one(load,function(){\n\t\t\t\t\t$(\".tip\").slideUp(200);\n\t\t\t\t\tCurrPic++;\n\t\t\t\t\tif(CurrPic>4)CurrPic=0;\n\t\t\t\t});\n\t\t\t\t\u002F*(\"img\").load(PicArr[CurrPic],function(){\n\t\t\t\t\t$(this).attr(\"src\",PicArr[CurrPic]);\n\t\t\t\t\t$(\".tip\").slideUp(200);\n\t\t\t\t\talert(CurrPic);\n\t\t\t\t\tCurrPic++;\n\t\t\t\t\tif(CurrPic>4)CurrPic=0;\n\t\t\t\t});*\u002F\n\t\t\t}\n\t\t})(jQuery);\n\n\t\t$(document).ready(function(){\n\t\t\tPicArr = new Array(\"1.jpg\",\"2.jpg\",\"3.jpg\",\"4.jpg\",\"5.jpg\");\n\t\t\tCurrPic=0;\n\t\t\t$(\".tip\").css({\"position\":\"absolute\",\"top\":\"100px\",\"left\":\"50px\"});\n\t\t\t$(\".tip\").hide();\n\t\t\t$(\".scoll\").click(function(){$.NextPic();});\n\t\t})\n\t\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n\t\u003Cinput class=\"picbtn\" type=\"button\" value=\"Next\" \u002F>\n\t\u003Cdiv class=\"tip\">正在加载……\u003C\u002Fdiv>\n\t\u003Cdiv class=\"notice\">\n\t\t\u003Cimg id=\"img\"\u002F>\n\t\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n",null,0,"2026-08-28 04:37:17","published","\u003Cp>最近在学习JQuery，想从原理上模拟一下无刷新的相册浏览。\u003C\u002Fp>\n\u003Cp>最先想到的思路是利用缓存，也就是先显示提示消息，然后get图片，在get完的时候回调，将img标签的\u003Ccode>src\u003C\u002Fcode>改掉，由于刚刚get过，有了缓存，所以图片会立刻显示出来。\u003C\u002Fp>\n\u003Cp>页面元素：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><input class="picbtn" type="button" value="Next" \u002F>\n<div class="tip">正在加载……<\u002Fdiv>\n<div class="notice">\n\t<img \u002F>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>按钮的事件绑定：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$(".picbtn").click(function(){NextPic();});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>定义了一个数组PicArr用来记录所有图片。\u003C\u002Fp>\n\u003Cp>NextPic内容：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$(".tip").slideDown(200);  \u002F\u002F显示提示\t$.get(PicArr[CurrPic],function(){\n\t$("img").attr("src",PicArr[CurrPic]);\n\t$(".tip").slideUp(200);\n\tCurrPic++;\n\tif(CurrPic>4)\n\t\tCurrPic=0;\n\t\t});\n};\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在CHROME和FF下显示正常，IE6下异常，IE7、8未测试。\u003C\u002Fp>\n\u003Cp>后来在ASPRAIN的开发者 稽山草 的帮助下，思路改成了先改src，然后绑定onload事件，在onload中回调。\u003C\u002Fp>\n\u003Cp>核心代码：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>$("img").attr("src",PicArr[CurrPic])\n\t.bind(load,function(){\n\t\t$(".tip").slideUp(200);\n\t\tCurrPic++;\n\t\tif(CurrPic>4)CurrPic=0;\n\t});\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>后来一看基本正常了，但是仔细看还是不正常，图片顺序开始乱跳，跟踪了好久发现回调函数会多次运行。中间想到会不会是事件绑定的问题，因为\u003Ccode>onclick\u003C\u002Fcode>事件的绑定是\u003Ccode>$(Element).bind("click",callback)\u003C\u002Fcode>，可以简写成\u003Ccode>$(Element).click(callback)\u003C\u002Fcode>，想到\u003Ccode>$(Element).bind("load",callback)\u003C\u002Fcode>和\u003Ccode>$(Element).load(url,callback)\u003C\u002Fcode>会不会是一样，查资料写得都不怎么清楚，改了试一下，还是不一样，不过在chrome和ff下依然能工作，但是数据不太正常，IE下报错。\u003C\u002Fp>\n\u003Cp>再次检查 稽山草 给的代码，发现问题在哪了。\u003C\u002Fp>\n\u003Cp>load事件的绑定的是一个匿名函数，而当按钮按下时会再次绑定，所以会重复执行。于是将绑定\u003Ccode>bind\u003C\u002Fcode>改成\u003Ccode>one\u003C\u002Fcode>搞定。最终完整代码如下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode><!DOCTYPE html PUBLIC "-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Transitional\u002F\u002FEN" "http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-transitional.dtd">\n<html xmlns="http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml">\n<head>\n\t<meta http-equiv="Content-Type" content="text\u002Fhtml; charset=gb2312" \u002F>\n\t<title>JQUERY动态加载图片<\u002Ftitle>\n\t<script type="text\u002Fjavascript" src="jquery\u002Fjquery-1.3.2.min.js"><\u002Fscript>\n\t<script type="text\u002Fjavascript">\n\t\t(function($){\n\t\t\t$.NextPic=function(){\n\t\t\t\t$(".tip").slideDown(200);\n\t\t\t\t$("img").attr("src",PicArr[CurrPic]).one(load,function(){\n\t\t\t\t\t$(".tip").slideUp(200);\n\t\t\t\t\tCurrPic++;\n\t\t\t\t\tif(CurrPic>4)CurrPic=0;\n\t\t\t\t});\n\t\t\t\t\u002F*("img").load(PicArr[CurrPic],function(){\n\t\t\t\t\t$(this).attr("src",PicArr[CurrPic]);\n\t\t\t\t\t$(".tip").slideUp(200);\n\t\t\t\t\talert(CurrPic);\n\t\t\t\t\tCurrPic++;\n\t\t\t\t\tif(CurrPic>4)CurrPic=0;\n\t\t\t\t});*\u002F\n\t\t\t}\n\t\t})(jQuery);\n\n\t\t$(document).ready(function(){\n\t\t\tPicArr = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");\n\t\t\tCurrPic=0;\n\t\t\t$(".tip").css({"position":"absolute","top":"100px","left":"50px"});\n\t\t\t$(".tip").hide();\n\t\t\t$(".scoll").click(function(){$.NextPic();});\n\t\t})\n\t<\u002Fscript>\n<\u002Fhead>\n<body>\n\t<input class="picbtn" type="button" value="Next" \u002F>\n\t<div class="tip">正在加载……<\u002Fdiv>\n\t<div class="notice">\n\t\t<img id="img"\u002F>\n\t<\u002Fdiv>\n<\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n","",{"total":17,"totalRoots":17,"comments":23,"pv":17},[]]