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

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

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

페이지 요소:

4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
959ca913a624e25b2223e504f10f3326
94b3e26ee717c64999d7867364b1b4a3

버튼 이벤트 바인딩:

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

0d8422d5a748d838d5911bbec5723448
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
b2386ffb911b14667cb8f0f91ea547a7JQUERY动态加载图片6e916e0f7d1e588d4f442bf645aedb2f
044d7161605f615a3151a8dfc16550092cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
(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();});
})
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
4a9db50b40e39eca75cbc99c2c312d9f
4210fe3935aaf62d0282b34d795cabaf正在加载……94b3e26ee717c64999d7867364b1b4a3
ff8c108d65d523a809fb6ace59384e83
6b8f78aabd1c9dd3c316942cb62a24ee
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

추천 자료:

백그라운드 단계 호출의 jQuery+AJAX 구현에 대한 자세한 설명

그림 및 텍스트 튜토리얼 AJAX 사용법에 대한 자세한 설명

위 내용은 JQuery는 Ajax를 호출하여 이미지를 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!