AJAX 갤러리에서 모든

Question

좋은 아침, 나는 asyncronus 아약스 로딩 ....

나는 dinamic 갤러리를 완료했고 내가 페이지 그 후 이미지를로드 할 문제를했습니다

로드 로드되었습니다.

그러나 이미지를 희미하게하고 스피너를 페이드 아웃 시키려고 할 때 완벽하게 지나간 것만이 마지막 요소입니다. 왜?

내가 할 수있는 일은 무엇인가? 감사!

JS 파일

$('.Home-Image').each(function(index) { 

MyHolder = $(this).children(".Home-Image-Holder"); 
MyLoader = $(this).children(".Home-Image-Loader"); 

IDIMG = $(MyHolder).attr("AjaxRel"); 


$(MyHolder).load('<?PHP echo($ABS); ?>/inl/components/AjaxImageHome.php?ABS=<?PHP echo $ABS; ?>&IDIMG='+IDIMG, function() 
{ 
    MyLoader.fadeOut(250,0,function(){MyHolder.fadeIn();}); 
}); 

});

HTML 파일

<div class="Home-Image">  
    <div class="Home-Image-Loader"></div> 
    <div class="Home-Image-Holder" AjaxRel="1"></div> 
</div> 

<div class="Home-Image">  
    <div class="Home-Image-Loader"></div> 
    <div class="Home-Image-Holder" AjaxRel="2"></div> 
</div> 

<div class="Home-Image">  
    <div class="Home-Image-Loader"></div> 
    <div class="Home-Image-Holder" AjaxRel="3"></div> 
</div> 


<div class="Home-Image">  
    <div class="Home-Image-Loader"></div> 
    <div class="Home-Image-Holder" AjaxRel="4"></div> 
</div> 

Answer 1

내 생각 엔 당신의 .each() 기능이 빠르게 .load()의 콜백 함수가 실행보다 루프를 종료한다는 것입니다.

.load() 함수가 실행될 때까지 루프가 완료되고 MyHolder와 MyLoader는 마지막 .each() 실행에서 정의한 마지막 시간과 같습니다.

해결 방법 : load_img을 실행하면

$('.Home-Image').each(function(index) { 

MyHolder = $(this).children(".Home-Image-Holder"); 
MyLoader = $(this).children(".Home-Image-Loader"); 
load_img(MyHolder,MyLoader); 


function load_img(MyHolder,MyLoader){ 
    IDIMG = $(MyHolder).attr("AjaxRel"); 
    $(MyHolder).load('<?PHP echo($ABS); ?>/inl/components/AjaxImageHome.php?ABS=<?PHP echo $ABS; ?>&IDIMG='+IDIMG, function() 
    { 
     MyLoader.fadeOut(250,0,function(){MyHolder.fadeIn();}); 
    }); 
} 

이 방법은, 당신의 두 변수가 서로 다른 범위에 저장되며, 다음 .each() 반복에 자신을 덮어 쓰지 않습니다.