JQuery는 Ajax를 호출하여 이미지를 로드합니다.-JS 튜토리얼-php.cn

JQuery는 Ajax를 호출하여 이미지를 로드합니다.

php中世界最好的语言

풀어 주다： 2018-04-24 15:56:30

원래의

3446명이 탐색했습니다.

이번에는 Ajax를 호출하여 이미지를 로드하는 JQuery를 소개하겠습니다. JQuery에서 Ajax를 호출하여 이미지를 로드하는 경우의 주의 사항은 무엇입니까?

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

페이지 요소:

<input class="picbtn" type="button" value="Next" />
<p class="tip">正在加载……</p>
<p class="notice">
<img />
</p>

로그인 후 복사

버튼 이벤트 바인딩:

$(".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 개발자 Ji Shancao의 도움으로 src를 먼저 변경한 다음 onload 이벤트를 바인딩하고 onload에서 다시 호출하는 아이디어로 변경되었습니다.

핵심 코드:

$("img").attr("src",PicArr[CurrPic]) 
.bind(&#39;load&#39;,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에서 오류가 보고됩니다.

Jishancao가 제공한 코드를 다시 확인하고 문제가 있는 위치를 알아보세요.

load 이벤트는 익명 함수에 바인딩되어 있으며, 버튼을 누르면 다시 바인딩되므로 반복적으로 실행됩니다. 그래서 바인딩 바인드를 하나로 변경하고 완료했습니다. 최종 완성 코드는 다음과 같습니다.

<!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(&#39;load&#39;,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" />
<p class="tip">正在加载……</p>
<p class="notice">
<img id="img"/>
</p>
</body>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!