0

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ゼロを返すことを意味します。ただし、これは各画像に初めてカーソルを合わせると発生します。

4

1 に答える 1

2

これはおそらく、最初のリクエストで画像が完全に読み込まれていないときに、高さの読み取りが早すぎるために発生します。次のように、画像の読み込み（または同じ画像の2番目のリクエストから完了する）イベントを待つ必要があります。

$(".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();
       });

});
于 2012-09-13T08:57:04.827 に答える