2

だから私は自分の画像の高さを見つけて、上マージンを追加しようとしています。これにより、垂直方向の中心を課すことができます。

このコードを実行しています。F5リフレッシュでは正しい高さが得られますが、CTRL+F5リフレッシュでははるかに低い高さが得られます。これは読み込み/遅延の問題だと思いますが、ドキュメント対応を使用しているため、何が起こっているのかよくわかりません。php関数を使ってみましたが、サイトの速度が驚くほど遅くなるので、jqueryを使い続ける必要があります。

あなたはそれがここで働いているのを見ることができます。www.mzillustration.com

 jQuery(document).ready(function() {

 if (jQuery('.imagedisplay').length != 0) {
                jQuery('.imagedisplay').each(function(){ 

                var imgheight = jQuery(this).find('img').height();

                var topmarg = ((240 - imgheight) / 2) ; 

                jQuery(this).find('img').css({'margin-top':topmarg+'px'});



            });

});

どんなアイデア/ヘルプ/説明も大歓迎です。ありがとう

4

5 に答える 5

6

onload と onready には違いがあります。

ready は実際の DOM ツリーが完了するまで待機しますが、onload はページに表示されているすべてのコンテンツの読み込みが完了するまで待機します。そのため、キャッシュをクリアして更新すると、dom ツリーが画像よりもはるかに速く終了するため、間違った高さが得られるという説明があります。

代わりに onload-event を使用してみて、別の結果が得られるかどうかを確認してください。

于 2012-11-09T18:48:34.330 に答える
3

ブラウザーに高さを尋ねる前に、画像が読み込まれていることを確認する必要があります。そのイメージ パスが html に存在する場合、残念ながらこれをクロス ブラウザーで処理するには jquery プラグインが必要になります。

https://github.com/alexanderdickson/waitForImages

http://desandro.github.com/imagesloaded/

または、jquery で次のように表示される window.onload イベントを待つ必要があります。

  $(window).on('load', function(){....

ただし、ウィンドウ読み込みイベントを使用すると、すべてのリソースが読み込まれるまで待機し、サイトによっては、画像自体のみを測定する場合と比較して深刻な遅延になる可能性があります.

または、JavaScript から画像を読み込むことに慣れている場合は、コードを適切に並べ替えるだけでこれを処理できます。

 var loadTester = new Image(),
     imgH;
 $(loadTest).on('load',function(){
     imgH = $('#image').attr('src',loadTester.src).height();
 }
 loadTester.src = "paht/to/image.jpg";

ページをリロードする方法に違いが見られる理由は、単純な更新ではキャッシュがクリアされないため、画像が既に読み込まれているためです。ctrl+f5 を押すとキャッシュがクリアされるため、ブラウザーに高さを要求しても画像はまだ読み込まれていません。

開発中のキャッシュ制御については、Firefox Web 開発者ツールバーの取得を検討してください。

ここに画像の説明を入力

于 2012-11-09T18:49:30.493 に答える
1

このアプローチを試してください：

jQuery(function() {
    jQuery('.imagedisplay img').each(function() {
        var $this   = jQuery(this),
            height  = $this.height();
        if (height) {
            $this.css('margin-top', ((240 - height) / 2) + 'px');
        } else {
            $this.on('load', function() {
                $this.css('margin-top', ((240 - $this.height()) / 2) + 'px');
            });
        }
    });
});
于 2012-11-09T18:56:05.857 に答える
0

高さを抽出する前に、画像が読み込まれていることを確認する必要があります。completeこれは、画像のプロパティを使用して簡単に確認できます。これを試して：

var setH = function() {
    $(this).css('margin-top', (240 - this.height) / 2);
}
$('.imagedisplay img').each(function() {
    if( this.complete ) {
        setH.call(this); // apply height straight away
        return;
    }
    $(this).load(setH); // apply height when the image has loaded
});
于 2012-11-09T19:20:22.947 に答える
0

画像は、実際のページ コンテンツとは別にキャッシュ/ロードできます。準備ができているドキュメントは、すべてが読み込まれる前に発生する可能性があります (私の経験では通常)。

ロードされる実際の要素にイベント リスナーを追加してみてください。

于 2012-11-09T18:49:47.310 に答える