☰

CSS 画像のプリロード 質問する

tag-icon • tag-icon css image background preloader preload
CSS 画像のプリロード 質問する

ボタンをクリックすると展開される非表示の連絡フォームがあります。そのフィールドは CSS 背景画像として設定されており、切り替えられた div よりも常に少し遅れて表示されます。

セクションでこのスニペットを使用していました<head>が、うまくいきませんでした (キャッシュをクリアした後) :

<script>
$(document).ready(function() {
        pic = new Image();
        pic2 = new Image();
        pic3 = new Image();
        pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
        pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
        pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>

私はライブラリとして jQuery を使用しているので、この問題の解決にもこれを使用できれば良いと思います。

ご意見ありがとうございます。

ベストアンサー1

CSS のみを使用して画像をプリロードする

以下のコードでは、bodyページ上に存在することが保証されている唯一の要素の 1 つであるため、要素をランダムに選択しています。

「トリック」を機能させるには、content設定を快適に行えるプロパティを使用します。複数ロードするURLは、図に示すように、::after疑似要素は保持されます隠れた画像はレンダリングされません:

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg);   // load images
}

ここに画像の説明を入力してください

デモ

を使用する方が良いでしょうスプライト画像HTTPリクエストを減らすために...（比較的小さいサイズの画像が多い場合）そして画像がホストされていることを確認してくださいHTTP2使用されている。

おすすめ記事