0

ajaxイベントが発生するたびにリロードしたい背景画像があります。背景画像が新しい画像ソースを読み込んだ後、他のいくつかの非表示要素をフェードインします。

問題は、ajaxが読み込まれるたびに、背景画像の.load（）成功関数が追加の時間（1回目は1回の読み込み、2回目は2回の読み込みなど）で起動することです。

[より多くのコンテキストを表示するように編集]

// all elements that will be updated (fades array) are faded out

// initial ajax request which includes bg image path, new content, etc
$.get( imgSrc, function(data) {

    // set background image src to preloaded image
    $("#content>img").attr({"src": imgData.src});
    $("#content>img").attr({"alt": imgData.alt});
    $("#content>img").attr({"title": imgData.title});

    // update other elements with ajax data
    [...]

    // load image and fade in all other elements
    console.log( 'begin bg image load');
    $("#content>img").load(function() {
       console.log( 'this selector matches ' + $(this).length + ' element');
       console.log( '> begin fades..');
       for(var i=0; i < fades.length; i++){
          $( fades[i] ).fadeTo(750, 1);
       }
       console.log( '> faded in ' + i + ' elements');
    });
});

3回目にajaxロードを開始すると、firebugコンソールに次のように表示されます。

begin bg image load
this selector matches 1 element
> begin fades..
> faded in 7 elements
this selector matches 1 element
> begin fades..
> faded in 7 elements
this selector matches 1 element
> begin fades..
> faded in 7 elements

私の仮定：

  • これは、より大きなループの一部ではありません。「bgimageloadの開始」は1回だけ印刷されます。
  • ＃content> img要素は1つだけですが、そうでない場合はこの動作が意味をなします。

これは、.load（）が特に画像に対して動作する方法と関係がありますか？私はここで何が間違っているのですか？

4

1 に答える 1

0

src要素に属性を設定するとすぐに、画像の読み込みが実際にトリガーされます。

電話をかける.load()と、実際には新しいイベントハンドラーが登録されるため、電話をかけるたびに、ハンドラーを何$.get()度も何度も何度も再登録します。

于 2012-07-16T14:35:50.150 に答える