이 기사의 예에서는 JQuery가 Ajax 이미지 로딩을 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
최근 JQuery를 배우고 있는데 새로 고치지 않고 사진 앨범을 탐색하는 원리를 시뮬레이션하고 싶습니다.
가장 먼저 떠오르는 아이디어는 캐시를 사용하는 것, 즉 먼저 프롬프트 메시지를 표시한 다음, 가져오기가 완료되면 다시 호출하여 img 태그의 src를 변경하는 것입니다. 방금 획득했고 캐시가 있는 경우 사진이 즉시 표시됩니다.
페이지 요소:
<input class="picbtn" type="button" value="Next" /> <div class="tip">正在加载……</div> <div class="notice"> <img /> </div>
버튼 이벤트 바인딩:
NextPic 콘텐츠:
$(".tip").slideDown(200); //显示提示 $.get(PicArr[CurrPic],function(){ $("img").attr("src",PicArr[CurrPic]); $(".tip").slideUp(200); CurrPic++; if(CurrPic>4) CurrPic=0; });
CHROME 및 FF에서는 디스플레이가 정상이지만 IE7 및 8에서는 비정상적으로 테스트되었습니다.
나중에 ASPRAIN 개발자 Ji Shancao의 도움으로 src를 먼저 변경한 다음 onload 이벤트를 바인딩하고 onload를 다시 호출하는 아이디어로 변경되었습니다.
핵심 코드:
$("img").attr("src",PicArr[CurrPic]) .bind('load',function(){$(".tip").slideUp(200);CurrPic++;if(CurrPic>4)CurrPic=0;});
나중에 보니 기본적으로는 정상이었는데, 자세히 보니 여전히 비정상이었습니다. 오랜 시간 추적한 결과, 콜백 기능이 여러 번 실행되는 것을 발견했습니다.
onclick 이벤트의 바인딩이
이기 때문에 이벤트 바인딩에 문제가 있을 수 있다고 생각했습니다.
Jishancao가 제공한 코드를 다시 확인하고 문제가 있는 위치를 알아보세요.
로드 이벤트는 익명 함수에 바인딩되어 있으며 버튼을 누르면 다시 바인딩되므로 반복적으로 실행됩니다. 그래서 바인딩 바인드를 하나로 변경하고 완료했습니다. 최종 완성 코드는 다음과 같습니다.
<!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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.