图像上的 jQuery .load 触发一次

Question

上下文

包含人力资源信息的用户页面。

我在用户图片下有一个大小不固定的菜单。

我在图片加载时更新菜单margin-top：

_setMenuMarginTop: function () {
    var that = this;

    $('#picture > img').load(function () {
        that.$el.css('margin-top', $(this).height() + 'px');
    });
}

当当前用户发生变化时，我更新页面（用户信息，用户图片img）然后我调用_setMenuMarginTop方法，因为图片大小不一样：

initialize: function () {
    this.listenTo(app.curUser, 'sync', this._updateView);
},

...

_updateView: function () {
    this._setMenuMarginTop();

    // Other stuffs...
},

但是这次 jQuery 没有触发 .load 方法。

问题

• 知道为什么吗？
• 它只工作一次吗？
• 解决方法？

更多信息

img 更新到另一个视图：

initialize: function () {
    this.listenTo(app.curUser, 'sync', this._updateCurUserInfo);
}

...

_updateCurUserInfo: function () {
    this.$el.find('#picture').html( this.templatePicture({ 'url' : getPictureUrl(app.curUser.get('picture')) }) );

    // Other stuffs...
}

Answer 1

再次触发 onload 处理程序怎么样？

_setMenuMarginTop: function () {
    var that = this;

    $('#picture > img').on('load', function () {
        that.$el.css('margin-top', $(this).height() + 'px');
    }).each(function() {
         if (this.complete) $(this).trigger('load');
    });
}

请注意，它是一个事件处理程序，再次调用该函数只是应用另一个事件处理程序。

Answer 2

发生这种情况是因为新图像上没有加载功能。替换图像会中断事件。您可以使用 jQuery on 函数始终在#picture div 中的所有图像上触发事件：

$('#picture').on('load', 'img', function() {
    that.$el.css('margin-top', $(this).height() + 'px');
})

应该这样做。这将替换您的 $('#picture > img').load(function () { 行

它的作用是将事件附加到 '#picture' div，但实际上是在加载 #picture div 内的 'img' 时触发。

这样，如果图片被移除，事件也不会被移除。

Answer 3

我相信分配的图像src 每次都应该不同，以便load 触发。考虑以下演示：http://jsfiddle.net/j4tP8/1/

我正在使用基本图像和按钮

<button id="one">One</button>
<img id="img" />

通过哪个连接

$('#one').click(function() {
    $('#img').attr('src','https://site/image.jpg')
})

$('#img').load(function() {
    alert('loaded');
})

当您单击按钮时 - 图像被分配源。因为它是load 事件只会触发一次。但是如果你通过在源代码中添加随机字符串来修改代码：

$('#one').click(function() {
    $('#img').attr('src','https://site/image.jpg?' + Math.random() )
})

load 每次都会触发。