html - すべての画像が正しく読み込まれるようにする方法

Question

私の HTML ページでは、同じドメインから約 40 個の画像を読み込みます (ページの起動時に、すべての画像が同時に読み込まれます)。問題は、一部の画像が表示されないことがあることです。それらの画像は、左上に赤い X が付いた白いボックスにすぎません。しかし、ページを 1 回 (または数回) 更新しようとすると、その画像は問題なく読み込まれます。

なぜこれが起こるのか、そしてすべての画像が正常に読み込まれるようにする方法を知っている人はいますか?

Answer 1

これは、画像の読み込みが時間内に完了していないために発生します。あなたはjavascriptでそれらをプリロードしてみることができます

私がすることは、画像が読み込まれるように（サムネイルを使用して）小さいことを確認することです。次に、一度に数個だけロードし、ページがスクロールされるとき、またはユーザーがさらに画像を要求するたびに、さらにロードします。

それがどのように機能するかの例については、グーグル画像またはピンタレストを参照してください。ページをスクロールすると、一度にすべての画像を読み込むのではなく、より多くの画像が読み込まれます。