134

ボタンをクリックして展開される非表示の連絡先フォームがあります。そのフィールドは 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 を使用していますが、この号の整理にも jQuery を使用できればすばらしいと思います。

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

4

13 に答える 13

296

CSSのみを使用した画像のプリロード

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

「トリック」が機能するためには、複数のURLをcontent快適にロードできるプロパティを使用しますが、示されているように、画像がレンダリングされないように疑似要素は非表示になっています。::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が使用されている場所で画像がホストされていることを確認してください。

于 2013-01-17T23:47:14.187 に答える
33

元のコードが機能しているように見えることを確認できます。パスを間違えたイメージにさりげなくくっついていました。

ここにテストがあります: http://paragraphe.org/slidetoggletest/test.html

<script>
    var pic = new Image();
    var pic2 = new Image();
    var pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>
于 2009-09-03T17:52:57.590 に答える
14

http://css-tricks.com/snippets/css/css-only-image-preloading/

テクニック #1

要素の通常の状態で画像をロードし、背景の位置だけをずらします。次に、ホバー時に表示するように背景の位置を移動します。

#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }

テクニック #2

問題の要素に既に背景画像が適用されていて、その画像を変更する必要がある場合、上記は機能しません。通常、ここではスプライト (結合された背景画像) を使用し、背景の位置をシフトするだけです。しかし、それが不可能な場合は、これを試してください。既に使用されているが背景画像を持たない別のページ要素に背景画像を適用します。

#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
于 2011-01-06T12:50:08.583 に答える
10

これを試してください：

var c=new Image("Path to the background image");
c.onload=function(){
   //render the form
}

このコードでは、背景画像をプリロードし、ロード時にフォームをレンダリングします

于 2009-09-03T12:51:35.153 に答える
7

CSS で設定された背景画像をプリロードするために、私が思いついた最も効率的な答えは、機能しないことがわかったいくつかのコードの修正版でした。

$(':hidden').each(function() {
  var backgroundImage = $(this).css("background-image");
  if (backgroundImage != 'none') {
    tempImage = new Image();
    tempImage.src = backgroundImage;
  }
});

これの大きな利点は、将来新しい背景画像を取り込むときに更新する必要がないことです。新しい背景画像を見つけてプリロードします!

于 2012-10-19T04:07:32.703 に答える
5

これらのbg画像をサイトの他の場所でフォーム入力に再利用している場合は、画像スプライトを使用することをお勧めします。そうすれば、画像を一元管理できます（pic1、pic2、pic3などを使用する代わりに）。

スプライトは、複数のファイルではなく、サーバーから1つの（わずかに大きいものの）ファイルのみを要求するため、一般的にクライアントにとっては高速です。その他の利点については、SOの記事を参照してください。

CSS画像スプライト

繰り返しになりますが、これらを1つのフォームに使用しているだけで、ユーザーが連絡フォームを要求した場合にのみロードしたい場合は、これはまったく役に立たない可能性があります...ただし、意味があるかもしれません。

http://www.alistapart.com/articles/sprites

于 2009-09-03T21:26:43.333 に答える
1

その背景画像をどこかに隠してロードするのはどうですか。そうすれば、ページが開いたときに読み込まれ、ajax を使用してフォームが作成されると時間がかかりません。

body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
于 2009-09-03T12:52:58.560 に答える
1

唯一の方法は、画像を Base64 でエンコードして HTML コード内に配置することです。これにより、画像をダウンロードするためにサーバーに接続する必要がなくなります。

これにより、URL から画像がエンコードされるため、画像ファイルのコードをコピーしてページに挿入できます...

body {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
于 2011-09-25T06:00:35.317 に答える
1

このjQueryプラグインのwaitForImageを使用するか、画像を非表示のdivまたは（幅：0および高さ：0）に配置して、画像でonloadイベントを使用できます。

2〜3枚の画像しかない場合は、イベントをバインドしてチェーンでトリガーできるため、すべての画像の後にコードを実行できます。

于 2012-03-14T23:05:47.860 に答える
0

ページ要素とその背景画像がすでに DOM にある場合 (つまり、それらを動的に作成/変更していない場合)、それらの背景画像は既に読み込まれています。その時点で、圧縮方法を見たいと思うかもしれません:)

于 2009-09-03T12:45:02.943 に答える