javascript - 由于异步图像加载，图像的宽度和高度为零

Question

我有一个很长的base64类型字符串，我想设置为src图像的

 $('#img').attr('src',base64data)
 console.log('height - ' $('#img').height());
 console.log('width - ' $('#img').height());

看起来我回来0了。当然，如果我等一会儿，我会得到合适的高度。heightwidth

问题是.attr()没有回调，我将如何在src设置属性后获取高度和宽度而不0返回。（我想我得到 0 因为 Jquery 的变化是异步发生的，但我不能太确定）

Answer 1

$('#img').one('load', function() {
   console.log('height - ' $(this).height());
   console.log('width - ' $(this).width());
})
.attr('src',base64data);

/* if this image is already cached load event couldn't be fired:
 * then look for "complete" status and trigger load event 
 */
if ($('#img').get(0).complete) {
   $('#img').trigger('load');
}

在获取之前width，height您需要等待load事件。请注意，我使用one()了方法，因为如果图像已被缓存，则不应触发该load事件两次