1

最近、画像にmax-width:100%とheight:autoを追加し始めたので、ブラウザは必要に応じて画像を画面に合わせて縮小できます。私が見つけた唯一の欠点は、画像がページに読み込まれる「プレースホルダー」スペースのそれぞれが、画像が読み込まれるheight前にゼロになっているように見えることです。これにより、ページの読み込み後、すべての画像が読み込まれる前に、ページ要素がジャンプします。これはどのように機能するかを考えると理にかなっheight:autoていますが、誰かがそれを防ぐための創造的な解決策を思いついたのではないかと思っています.

4

1 に答える 1

0

誰かが述べたように、1つの解決策は次のように設定することmin-heightです:

.placeholder {
    height: auto;
    min-height: 140px;
    width: 100%;
}

ただし、これに関する問題は、140px から画像のサイズに関係なく、おそらく跳ね返る可能性があることです。また、すべての画像を、min-height設定したものよりも高くする必要があることも意味します。

残念ながら、問題はページの読み込み中にあるため、動的に画像を読み込み、プレースホルダーの高さを適切に設定するために JavaScript でできることはほとんどありません。

あなたができることの1つは、次のようなものです。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head stuff ... -->
</head>
<body>
    <div id="staggerer" style="display: none;">
        <!-- Put page content inside this ... -->
    </div>

    <script type="text/javascript">

        window.onload = function() {
            document.getElementById('staggerer').style.display = "block";
        };

        // Or in jQuery:

        $(window).load( function() {
            $('#staggerer').css('display', 'block');
        });

    </script>
</body>
</html>

これは、ページのコンテンツを表示する前に、すべてがロードされるまで待つだけです。ページの読み込みに時間がかかり、もちろん JavaScript に依存している場合、このソリューションは適切ではない可能性があります。

于 2013-06-20T08:35:18.917 に答える