图像上的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
每次都会点火。