上下文

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每次都会开火。

图像上的jQuery .load会触发一次

上下文

问题

更多信息

3 个答案: