图像上的jQuery .load会激发一次 [英] jQuery .load on image fires once

问题描述

包含HR信息的用户页面。

A user page with HR information.

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

I have a menu under the user picture which has an unfixed size.

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

I update the menu margin-top when the picture is loaded:

_setMenuMarginTop: function () {
    var that = this;

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

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

When the current user is changing, I update the page (user info, user picture img) then I recall the method _setMenuMarginTop as the picture size isn't the same:

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

...

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

    // Other stuffs...
},

但这一次jQuery不会触发 .load 方法。

But this time jQuery doesn't fire the .load method.

• 任何想法为什么？


• 只能使用一次吗？


• 解决方法？ li>
  

• Any idea why?
• Does it work only once?
• Workaround?

img更新到其他视图：

The img update into an other view:

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...
}

推荐答案

如何再次触发onload处理程序？

How about triggering the onload handler again ?

_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');
    });
}

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

And note that's it's an event handler, calling the function again just applies another event handler.

这篇关于图像上的jQuery .load会激发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！