0

視点/画面サイズに基づいて要素にパディングトップを追加することは可能ですか?

たとえば、大きな画像バナーがあり、ページをロードしたときに最初に表示されるようにしたい場合、ビューポイント js を介して追加されたパディングによってプッシュダウンされているため、以下のコンテンツは表示されません。そのため、下にスクロールします。 .

コンテンツの次にレスポンシブ画像ですが、画面サイズに関係なく、画像は常に最初に画面いっぱいに表示されますか?

次に、コンテンツをバナー画像の上にスクロールします。そのため、画面サイズに基づいた動的なパディングが必要ですか?

4

2 に答える 2

0

画像がコンテンツをできるだけ早くプッシュして、ウェブサイトを訪れた人が下のコンテンツを見ないようにしたい場合は、プレーンな JavaScript をページ全体の読み込み後に実行するのではなく、画像のすぐ下に配置して実行することをお勧めします。イメージがロードされた直後に実行されます。

<img id="banner" src="my-image.jpg">
<script>
    var banner = document.getElementById('banner');
    banner.onload = function() {
        banner.style.marginTop = (window.innerHeight - banner.offsetHeight) + 'px';
    };
</script>

それでも、より良いアプローチは、javascript によって画像を DOM にロードすることです

<div id="banner"></div>
<script>
    var banner = document.getElementById('banner');
    var img = new Image();

    banner.appendChild(img);
    img.onload = function() {
        banner.style.marginTop = (window.innerHeight - banner.offsetHeight) + 'px';
    };
    img.src = 'my-image.jpg';
</script>
于 2013-10-17T09:34:36.793 に答える