翻訳元: CSS 画像プリローダーの作成
中国語: 純粋な CSS 画像のプリロード
画像のプリロードを実装するには多くの方法がありますが、通常はスクロールを続けるために Javascript を使用することがほとんどです。 Javascript のプリロードに制約されなくなり、CSS を使用すれば、手間をかけずに画像をプリロードできます。
プリロードを使用する理由
プリロードの使用を検討する理由は何ですか? Web サイトでナビゲーションをスクロールしなければならず、画像が読み込まれるまでに遅延が発生したことはありませんか...ふふふ。この点では、プリロードが役立ちます。ページの読み込み時にこれらの画像が読み込まれ、ブラウザのキャッシュに保存されます。このようにして、ユーザーがナビゲーションをスクロールすると、遅延がなく、美しく滑らかになります。
CSSコード
コンセプトは、多数の背景画像を設定する CSS スタイルを記述し、それらの画像が表示されないように非表示にすることです。これらの背景画像は、プリロードしたいものです。
以下に例を示します。
#プリローダー {
/* プリロードしたい画像*/
背景画像: url(image1.jpg);
背景画像: url(image2.jpg);
背景画像: url(image3.jpg);
幅: 0px;
高さ: 0px;
表示: インライン;
}
これは、画像が表示されないように非表示にする方法です。また、画像を押し出すために背景位置の非常に大きな値を使用している人も見たことがあります。または、負のマージン値を指定します。プリロードしたい画像を非表示にする方法はたくさんありますので、最適なものを選択してください。
別の状況
画像がロード中であることを何らかの形で示す通常のアプローチに従っている場合、ダウンロードする巨大な画像が存在することはほとんどありません。以下は、画像が読み込まれていることをユーザーに示すための CSS です。
img { 背景: url(loadingHourGlass.gif) 繰り返しなし 50% 50% }
GIF 画像は、Mac のビーチボールや PC の砂時計と同様にアニメーション化できます。アニメーションを使用して、何かが起こっていることをユーザーに知らせます。
結論は
プリロードが理にかなっている場合は最善を尽くしてください。そうすれば、ユーザーはそれを気に入ってくれるでしょう。実際、彼らは気づかないかもしれませんが、それは良いことであり、サイトの読み込みが遅すぎることに彼らが気づいた場合は、おそらく遅すぎるでしょう。
デモを見る
例 1 に関する特記事項
まず最初に、コメントでネチズンからの質問に感謝します。この記事を翻訳した後、CSS ルールで同じ属性が複数回定義されていることを考慮すると、ブラウザーは通常、最後の属性のみを処理する必要があると判断しました。テストをしましたが、何が起こっているのか理解できませんでした。問題が深刻なため、対処が間に合わず、誤解を招く可能性があります。
私のテストによると、ほとんどのブラウザは最後のイメージのみをロードし、最初の 2 つのイメージは無視されます。ただし、Chrome などの Webkit-core ブラウザでは、これら 3 つの画像がプリロードされます。例 1 は問題を解決するための良いアイデアを示していますが、同じ CSS スタイルで複数の画像をロードする使用法については、CSS3 の複数の背景画像属性がより多くのブラウザでサポートされるまで待つ必要があるかもしれません。
PS: このデモについて説明しましょう。おそらく、元の作成者はあまり深く考えず、プリロードの効果を実証したかっただけなので、このデモ ページは少し単純なものになりました。彼は、プリロードされた画像を a:hover の背景として使用しただけで、マウスがその上を通過したときに表示されるようにしました。それは、その映像のちらつきをなくすことができます。さて、これはこの記事の 2 番目の使用法です...