JQuery實現(xiàn)Ajax加載圖片的方法
本文實例講述了JQuery實現(xiàn)Ajax加載圖片的方法。分享給大家供大家參考,具體如下:
最近在學(xué)習(xí)JQuery,想從原理上模擬一下無刷新的相冊瀏覽。
最先想到的思路是利用緩存,也就是先顯示提示消息,然后get圖片,在get完的時候回調(diào),將img標(biāo)簽的src改掉,由于剛剛get過,有了緩存,所以圖片會立刻顯示出來。
頁面元素:
<input class="picbtn" type="button" value="Next" /> <div class="tip">正在加載……</div> <div class="notice"> <img /> </div>
按鈕的事件綁定:
定義了一個數(shù)組PicArr用來記錄所有圖片
NextPic內(nèi)容:
$(".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的開發(fā)者 稽山草 的幫助下,思路改成了先改src,然后綁定onload事件,在onload中回調(diào)。
核心代碼:
$("img").attr("src",PicArr[CurrPic]) .bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
后來一看基本正常了,但是仔細(xì)看還是不正常,圖片順序開始亂跳,跟蹤了好久發(fā)現(xiàn)回調(diào)函數(shù)會多次運行。
中間想到會不會是事件綁定的問題,因為onclick事件的綁定是
再次檢查 稽山草 給的代碼,發(fā)現(xiàn)問題在哪了。
load事件的綁定的是一個匿名函數(shù),而當(dāng)按鈕按下時會再次綁定,所以會重復(fù)執(zhí)行。于是將綁定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動態(tài)加載圖片</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程序設(shè)計有所幫助。
相關(guān)文章
jQuery ajax方法傳遞中文時出現(xiàn)中文亂碼的解決方法
這篇文章主要介紹了jQuery ajax方法傳遞中文時出現(xiàn)中文亂碼的解決方法,涉及jQuery操作ajax的相關(guān)參數(shù)及編碼的設(shè)置方法與注意事項,需要的朋友可以參考下2016-07-07基于Jquery+Ajax+Json實現(xiàn)分頁顯示附效果圖
后臺action產(chǎn)生json數(shù)據(jù),js獲取json數(shù)據(jù)分頁顯示,詳細(xì)的示例代碼如下,需要的朋友可以學(xué)習(xí)下2014-07-07使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實現(xiàn)的對checkbox和radio控件的美化,非常不錯,大家可以通過修改圖片來實現(xiàn)更漂亮的效果。2010-11-11jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶有Legend的餅圖效果,結(jié)合實例形式分析了jQuery使用HighCharts繪制帶明細(xì)顯示的餅狀圖效果實現(xiàn)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery treeview樹形結(jié)構(gòu)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹形結(jié)構(gòu)應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-03-03