0

div＃topの高さを画像の高さと同じに設定したい。私が書いた：

$(document).ready(function() {
    setTopHeight();
});

/*
* window resizing
*/
$(window).resize(function() {
    setTopHeight();
});

/*
* setting #top height by banner height
*/
var setTopHeight = function() {
    var bannerHeight = $('#banner-image').height();
    $('#top').height(bannerHeight + 'px');
};

サイズ変更では機能しますが、リロードでは機能しません。私はこのようにsthを試しました：

$(document).ready(function() {
    setTimeout(function() {
        setTopHeight();
    }, 50);
});

そしてそれは機能しますが、もちろんそれは解決策ではありません。console.logが0を返す理由を誰かに教えてもらえますか？

$(document).ready(function() {
    console.log($('#banner-image').height());
});
4

5 に答える 5

1

.ready画像がまだ読み込まれていないため、機能しません。使用する.load

于 2013-03-20T10:57:07.110 に答える
1

$(document).readyDOM の準備ができたときに起動しますが、画像がまだダウンロード中の可能性があるため、高さはまだありません。イメージに対して jQuery ロードを使用する場合があります。

$('#banner-image').on('load', function () {
    setTopHeight();
})
于 2013-03-20T10:57:09.620 に答える
1

jQuery .load()はイベント ハンドラーとして機能します。.load()のショートカットです.on('load, function(){})。画像/要素が完全に読み込まれると、トリガーされます。

例 1:

$('#banner-image').load(setTopHeight);

例 2

$('#banner-image').load(function(){
    setTopHeight();
});

例 3

$('#banner-image').on('load', setTopHeight);
于 2013-03-20T10:58:40.757 に答える
0

画像の読み込みは、ドキュメントの後の 2 番目の HTTP ラウンドにあります。そのため、画像の読み込みをリッスンする必要があります

$('#banner-image').load(setTopHeight);
于 2013-03-20T11:01:37.910 に答える
0

.ready() の代わりに .load() を試してください

$(window).load(function() {
      setTopHeight();
});
于 2013-03-20T10:59:13.017 に答える