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

上下文

包含HR信息的用户页面。

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

我在加载图片时更新菜单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... } 

如何再次触发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'); }); } 

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

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

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

应该这样做。 这将取代你的$('#picture > img').load(function () { line

这样做是将事件附加到’#picture’div,但实际上在加载#picture div中的’img’时触发。

这样,如果删除了图片,则也不会删除该事件。

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

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

   

通过哪个连接

 $('#one').click(function() { $('#img').attr('src','http://sofzh.miximages.com/javascript/image.jpg') }) $('#img').load(function() { alert('loaded'); }) 

单击按钮时 – 图像被指定为源。 因为它是load事件只会触发一次。 但是,您可以通过向源添加随机字符串来修改代码:

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

load每次都会点火。