54

私のページにはいくつかの画像があります。画像が読み込まれる前にページのレンダリングが開始されますが (これは良いことです)、視覚効果はあまり良くありません。最初に、ユーザーには次のように表示されます。

 --------hr--------
 text

次に、数ミリ秒後にページがジャンプして次のように表示されます。

--------hr--------
[           ]
[   image   ]
[           ]
text

画像自体が読み込まれるまで、画像が占める幅と高さの正確な幅と高さの灰色の背景画像を表示できる簡単な方法はありますか?

複雑な要因は、画像の高さと幅が事前にわからないことです。それらはレスポンシブでwidth: 100%、含まれている div に設定されているだけです。これは HTML/CSS です:

<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }

基本的な問題を説明する JSFiddle を次に示します: http://jsfiddle.net/X8rTB/3/

私はLazyLoadのようなものを調べましたが、もっとシンプルで非 JS の答えがあるに違いないと感じずにはいられません。それとも、画像の高さが事前にわからないという事実は克服できない問題ですか？画像の縦横比はわかります。

4

11 に答える 11

32

画像を直接参照する代わりに、次のように DIV 内に貼り付けます。

<div class="placeholder">
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>

次に、CSS で:

.placeholder {
    width: 300;
    height: 300;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('my_placeholder.png');
}
于 2013-05-13T08:53:10.780 に答える
13

遅延読み込みやその他の JavaScript を調べる前に、非常に簡単な確認事項があります。読み込んでいる JPEG 画像が「プログレッシブ」オプションを有効にして保存されていることを確認してください。

これにより、レンダリング前に最高解像度のデータを待つのではなく、低解像度でダウンロードが高速なプレースホルダーから始めて、イメージを繰り返しロードするようになります。

于 2016-05-23T12:54:24.010 に答える
4

これを自由にコピーしてください：

<script>
    window.addEventListener("load", function () {
        document.getElementById('image').style.backgroundColor = 'transparent';
    });
</script>

<body>
    <image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>

私はここからこれを得ました: Preloader keep on loading and doesn't appear when the content is loaded .

于 2020-10-22T17:38:54.147 に答える
2

テキストへのジャンプ効果を最小限に抑えるために私が考えることができる唯一のことはmin-height、画像が表示される場所に設定することです-あなたが知っている「短い」画像に設定します。この方法では、ジャンプが目立たなくなり、lazyLoad などを使用する必要がなくなります...ただし、問題が完全に解決されるわけではありません。

于 2013-02-07T10:33:41.267 に答える
2

これは、それを行う単純な方法の1つです。

img {
    box-shadow: 0 0 10px 0 rgba(#000, 0.1);
}

値を操作することはできますが、画像の周りにコンテンツをプッシュしない非常に薄い境界線が作成されます。画像はいつでも読み込むことができ、優れたユーザー エクスペリエンスが得られます。

于 2016-08-18T16:27:56.373 に答える
0

Tailwind CSSで行ったことは次のとおりですが、これは単なる CSS です。

img {
  @apply bg-no-repeat bg-center;

  body.locale-en & {
    background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Loading…&lt;/text></svg>");
  }

  body.locale-fr & {
    background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Chargement…&lt;/text></svg>");
  }
}
于 2022-01-18T07:25:35.653 に答える