javascript - jquery .height() 在刚刚调用 append 函数后没有返回实际值

Question

我正在尝试使用 jquery 垂直对齐一些图片。

这是我的代码

$(".scroll a").hover(function (evt) {
  $("#box a").empty().append( 
    $('<img src='+this.href+' class="loadimg">')
  );
  vertical_align();
});

而垂直对齐功能在这里

function vertical_align(){
  var child = $(".loadimg").height();
  var parent = $("#box").height();
  var margin = (parent - child)/2;
  $("#box a").children("img").css('margin-top', margin); 
}

现在我面临的问题是，当页面加载时，imageHeight给出零并且图片的边距变为父高度的一半，这意味着imageheight返回零。但这只是第一次将鼠标悬停在每个图像上。

Answer 1

发生这种情况可能是因为您过早地读取高度，而在第一次请求时图像未完全加载。您应该等待图像的加载（或完成，来自同一图像的第二个请求）事件，如下所示

$(".scroll a").hover(function (evt) {
     var node = $("#box a");
     node.empty(); 
     $('<img src='+this.href+' class="loadimg">')
       .appendTo(node)
       .one('load complete', function() {
           vertical_align();
       });

});