0

我有一个背景图像，每当触发 ajax 事件时我想重新加载它。在背景图像加载新图像源后，我淡入了一些其他隐藏元素。

问题在于，每次加载 ajax 时，背景图像 .load() 成功函数都会触发一次额外的时间（第一次，1 次加载；第二次，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');
    });
});

当我第三次启动 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

我的假设：

  • 这不是更大循环的一部分：“begin bg image load”只打印一次。
  • 只有一个#content>img 元素，但如果不是这种情况，这种行为是有意义的。

这与 .load() 专门对图像进行操作的方式有关吗？我在这里做错了什么？

4

1 回答 1

0

一旦您src在元素上设置了属性，实际上就会触发图像加载。

当您调用时，.load()您实际上是在注册一个新的事件处理程序，因此每次调用时，$.get()您都在重新注册处理程序，一遍又一遍，一遍又一遍。

于 2012-07-16T14:35:50.150 回答