次の例を見てください。
ホバー時に異なる背景が与えられる div があります。この場合、私の要点を説明するために、画像のサイズがやや大きくなっています。
このホバー画像をプリロードするために、JavaScript で基本的な画像プリロード設定を行いました。Chrome Dev Tools を開き、[ネットワーク] タブを確認します。SHIFT + ページの再読み込みをクリアすると、プリロードの背景のホバー画像がプリロードされることがわかります。
しかし、まだイメージフラッシュがあります
ただし、画像にカーソルを合わせて注意深く見ると、ホバー画像が表示される前に、画像に短い白い閃光があることがわかります。これは、画像をプリロードしない場合に表示されるのと同じ種類の画像フラッシュです。また、[ネットワーク] タブを見ると、最初に div にカーソルを合わせると、背景のホバー画像が再度読み込まれることがわかります。だから今、それはそこに2回あります。
画像のプリロードが機能していないと思います。しかし、この場合、プリロード イメージが Chrome Dev Tools の [ネットワーク] タブに表示されるのはなぜですか?
JS プリロード スクリプトは次のとおりです。
var image = new Image();
image.src = "http://us.123rf.com/400wm/400/400/zmkstudio/zmkstudio1103/zmkstudio110300066/8993167-abstract-water-color-painting-random-red-texture-background.jpg";
ここで何が問題なのですか？