JavaScriptやHTMLコードでイメージをプリロードする方法は？

getdocs

4年前

多くの場合、パフォーマンス上の懸念からブラウザのキャッシュに画像を「プリロード」する必要があります。たとえば、マウスオーバーイベントが発生し、画像を遅滞なく更新する必要があります。この「プリロード」は、JavaScriptまたはHTMLコードの2つの方法で実現できます。

Javascript

次のJavascriptで画像を「プリロード」することができます。

<script type="text/javascript">
if (document.images) {
    imgPreload = new Image();
    imgPreload.src = "/preload-image.jpg";
}
</script>

また、以下のJavascriptでいくつかの画像を「プリロード」することもできます。

<script type="text/javascript">
if (document.images) {
    imgPreload1 = new Image();
    imgPreload1.src = "/preload-image1.jpg";
    imgPreload2 = new Image();
    imgPreload2.src = "/Preload-image2.jpg";
}
</script>

HTML

Javascriptは無効になっていますか？ここでHTMLのもう一つの汚いトリックです。

画像をロードして、指定した幅と高さ= 1 =で非表示にします。

image

javascript