由于异步图像加载,图像的宽度和高度为零

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事件两次