0

Web ページには、複数の画像が重なり合っています。画像のCSSは

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;
}

すべての画像は、html の img タグで適切な高さと幅が指定されています。

ページが低速の接続で読み込まれると、実際の画像が読み込まれる前に、画像が拡大縮小して表示されるフレームが必要になります。これは、次のようになる場合があるためです。

[----------------]
[  Loaded image  ]
[----------------]

[ Not loaded image ]

[----------------]
[  Loaded image  ]
[----------------]

ロードされた画像は適切なサイズですが、ロードされていない画像はまだalt=text表示されている行にすぎません。

画像の読み込み

次に、3 つの負荷の中間が適切なサイズに膨らみ、他の負荷を移動します。

外観と読み込みが CSS なしの場合と同じになるようにしたいと思います。画像が表示される空のフレームは正しいピクセルサイズで表示され、画像で埋められます。

もちろん、これは接続が遅い場合にのみ問題になることに注意してください。画像は実際にはそれほど大きくありません.

画像はプログレッシブ JPG です。

私はしたいと思います：

  • 画像で埋める前に、CSS 設定に従って画像フレームをスケーリングします。
  • 画像を順番に読み込みます。上部の画像から始めて、ページの下に向かって続けます。

優れたLazyloading プラグインを使用することはもちろん解決策になる可能性がありますが、やり過ぎのように思えます。

javascript を使用してウィンドウの幅を検出し、html タグのwidthandを変更することもできますheightが、これは不要なようです。

画像自体のコードを変更する必要がないソリューションを希望します。これが達成可能な場合は、css のみを使用することをお勧めします。

あなたの考えを楽しみにしています！この長い投稿を読んでくれてありがとう:) !

4

1 に答える 1

0

ページ内のオブジェクトが読み込まれる順序は、私の知る限り、javascript を使用する以外の方法では制御できません。ブラウザーが異なれば、ページの読み込みも異なります。

Firefox はプログレッシブ JPEG を次々にロードする傾向がありますが、Chrome はそれらすべてを同時にロードし始めます。

jQuery の Lazyload プラグインが解決策になる可能性があります。これは、画像のプレースホルダーとスケーリングを適切に行いますが、JPEG のプログレッシブ ダウンロードを無効にします。

画像にcssを入れると改善されると思いますheight: auto;（画像フレームが適切なサイズになるのが速くなります）が、それはわずかな違いであり、よくわかりません。

解決策は、最初にプレースホルダー画像を使用する JavaScript を記述し、次に画像を順次読み取り、段階的に表示できるようにすることです。

このスクリプトの書き方や、私の問題に対するさまざまな解決策について、さらに意見をお寄せいただきありがとうございます。

于 2013-03-28T19:45:48.147 に答える