JQuery는 Images_jquery를 로드하는 Ajax 메소드를 구현합니다.-JS 튜토리얼-php.cn

JQuery는 Images_jquery를 로드하는 Ajax 메소드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:23:44

원래의

1545명이 탐색했습니다.

이 기사의 예에서는 JQuery가 Ajax 이미지 로딩을 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

최근 JQuery를 배우고 있는데 새로 고치지 않고 사진 앨범을 탐색하는 원리를 시뮬레이션하고 싶습니다.

가장 먼저 떠오르는 아이디어는 캐시를 사용하는 것, 즉 먼저 프롬프트 메시지를 표시한 다음, 가져오기가 완료되면 다시 호출하여 img 태그의 src를 변경하는 것입니다. 방금 획득했고 캐시가 있는 경우 사진이 즉시 표시됩니다.

페이지 요소:

<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에서는 디스플레이가 정상이지만 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 이벤트의 바인딩이
이기 때문에 이벤트 바인딩에 문제가 있을 수 있다고 생각했습니다.

코드 복사 코드는 다음과 같습니다.

$(Element).bind("click",callback)

약칭 가능 Into

코드 복사 코드는 다음과 같습니다.

$(Element).click(callback)

$(Element)를 생각해보면 .bind("load",callback)과 $(Element).load(url,callback)이 같을까요? 정보를 명확하게 찾을 수 없어서 변경해 보았습니다. 하지만 여전히 다릅니다. 하지만 크롬과 ff에서는 IE에서 계속 작동할 수 있지만 데이터가 정상이 아니며 IE에서 오류가 보고됩니다.

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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.