0

おはようございます、

asyncronusajaxの読み込みに問題があります...

ダイナミックギャラリーを作成しました。ページが読み込まれた後、画像を読み込みたいと思います。

しかし、画像をフェードインしてスピナーをフェードアウトしようとすると、完全に消えたように見えるのは最後の要素だけです。なぜですか?

私に何ができる?ありがとう!

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>
4

1 に答える 1

0

私の推測では、あなたの関数は、のコールバック関数が実行する.each()よりも速くループを終了します。.load()

このため、.load()関数が実行されるまでに、ループは終了し、MyHolderとMyLoaderは最後に定義した時間(最後の.each()実行時)と等しくなります。

解決:

$('.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();}); 
   });
}

このように、load_imgを実行すると、2つの変数は異なるスコープに保存され、次の.each()の反復で上書きされません。

于 2012-04-16T13:48:10.000 に答える