Question

我有点像这样：

<div id="container">
 <img id="screenFirstImg">
</div>

和js：

$('a.screenThumbLink').click(function(){

  console.log( $('#container').height() );
    $('img.screenFirstImg').attr('src','new src');
  console.log( $('#container').height() );

});

基本上点击一个tumbnail screenFirstImage会被更改（图片更大）。但是console.log显示了完全相同的高度数，并且不可能，因为在设置新的src之后容器变大了。

也许这就是因为当我做第二个console.log时，图像还没有加载如何在加载img后获得.height？

Answer 1

$("#container img").load(function () {
  console.log( $("#container").height() );
});

$('a.screenThumbLink').click(function(){
  $('img.screenFirstImg').attr('src','new src');
});

Answer 2

将您的代码更改为

$('a.screenThumbLink').click(function(){

  console.log( $('#container').height() );
  $('img.screenFirstImg')
      .one('load', function(){
               console.log( $('#container').height() );
          })
      .attr('src','new src');
});

Answer 3

将onload事件附加到图像上，然后在图像加载时触发，然后你可以随心所欲地做任何事情。

为什么更改图像的src是异步的？

3 个答案: