タブーをプリロードする従来のJavaScript画像です
Dreamweaverを使ってWebサイトを作成していましたが、古き良き時代（実際はそうではありません）を思い出します。
私はその頃からかなり離れていますが、小さなサイトを元のFrontPage（:: cringe：:)形式から標準のHTML/CSS実装に適応させていたので、疑問に思わずにはいられません... JavaScriptイメージのプリロードを現在のバージョンに実装しますか？または、より良い方法はありますか？
従来のJavaScriptプリローダーメソッドを使用して、ページに含まれるすべてのアセットをユーザーに要求することで、ページの読み込みをブロックしたくありません。できるだけ早くユーザーに何かを与えることを大切にしています。そうすることで、Googleモジョに何らかの潜在的な害があります。
ロード中に不要なページのリフローを防ぐためのよりクリーンなソリューションはありますか？たとえば、画像要素のCSSスタイル属性を使用して静的な幅/高さの寸法を設定します。
HTMLおよび/またはCSSで画像の寸法を指定することは、HTML 2.0の時代からalwaysが推奨されており、画像読み込みの遅延によるページのリフローの必要性を排除します。
それは静的な画像の世話をします。もう1つのケースは、ページが読み込まれたafterまで表示されない画像です。
ロールオーバーエフェクトのようなシンプルなものには、背景画像とCSS :hoverセレクターを使用する必要があります。 最新のブラウザのほとんどに事前に登録されているのはどれですか。または、さらに良いことに、 CSSスプライト を使用します。これにより、プリロードが保証され、一般的にイメージのロードが高速化されます。
イメージスライダー のようなより高度なものについては、JavaScriptが必要です。それらについては、可能であれば、プリロードやその他の技術的な詳細を効率的かつ十分にテストされた方法で処理する既存のスクリプトを使用することをお勧めします。
他のページで使用されている画像のプリロードは、現在のページのロードを中断することなく実行できます。現在のページのすべてのアセットの読み込みが完了したら、追加の画像を読み込むことができます。
Window.onload JavaScriptイベント（またはjQueryを使用する場合は$（window）.loadイベント）を使用して、次のページのレンダリングに必要な画像の読み込みを開始します。