web-dev-qa-db-ja.com

JavaScriptなしで画像をプリロードする方法は？

マイレイアウトの1つに、いくつかの大きな画像（XMLから取得）があり、リンクの一部にマウスを置いたときに表示されますが、ページが読み込まれ、ロールオーバーされると、その画像の読み込みに時間がかかります。

注：修正5つの画像があります（動的ではありません）

JavaScriptを使用して画像をプリロードしたくない

私はホバーメニューなどを使用していませんが、この画像は製品画像であり、リンクはテキストリンクですポイントを取得しましたか？

javascripthtmlimage-preloader
27
Wasim Shaikh

から http://snipplr.com/view/2122/css-image-preloader

CSSのみを使用するローテクだが便利なテクニック。 CSSをスタイルシートに配置した後、これをページのbodyタグのすぐ下に挿入します。ページ全体で画像が参照されるときはいつでも、画像がキャッシュから読み込まれます。

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}
32
Khurram Aziz

HTML5には、link prefetchingによってこれを行う新しい方法があります。

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/Sprite.png" />

HTMLで必要なだけlinkタグを追加するだけで問題ありません。もちろん、古いブラウザはこの方法でコンテンツをロードしません。

注上記のコードはApple Safari safariは現在のバージョン12までプリフェッチをサポートしていません https ：//caniuse.com/#search=prefetch

[〜＃〜]更新[〜＃〜]

サーバーにHTTP2が提供されている場合は、応答にLinkヘッダーを追加して、 HTTP2サーバープッシュ を使用することもできます。

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/Sprite.png>; rel=preload; as=image;
41
Luis Dalmolin

画像をプリロードする必要はありません。 99％の人がホバー効果で2つの画像を使用する必要があると考える理由を理解できません。そのような必要はなく、2つの画像を使用すると見栄えが悪くなります。私が知っている唯一の良い解決策は、A要素にCSSを使用することです（または他のすべてのボタンに簡単なJS）。ボタンをホバーすると、背景の位置がオフセットに設定されます。

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }

それがすべてです、使用した画像は以下で確認できます：

alt text
（ソース： margonem.pl ）

編集：他の方法でも使用できます。画像を切り替える代わりに、画像を非表示にすることができます。したがって、開始点は "background-position：0 -100px"で、ホバー "0 0"になります。

この手法はCSSスプライトと呼ばれます-これはその良い説明です： http://css-tricks.com/css-sprites/

35
Thinker

ここではまだ触れていませんが、IE6と7を気にする必要がない場合にうまく機能するテクニックは、:after疑似セレクターを使用して、画像をcontentとしてページの要素に追加します。以下のコードは この記事 から解除されました：

body:after {
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
    display: none;
}

JavaScriptを使用して画像をプリロードする場合と比較して、これについて私が見られる唯一の欠点は、画像をメモリから解放する簡単な方法がないことです。

12
Andrew Hedges

非表示のdivを使用して画像を配置できます。

<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
    <img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>

ただし、これは画像に対してのみ機能します。たとえば.swfファイルに対して同じことを行おうとすると、問題が発生します。 Firefoxは、.swfファイルが表示されていない場合は実行しません。

10
Matti Lyra

非表示のimgタグで画像を参照します。ページの読み込み中にもダウンロードされます。

3
Canavar

画像のプリロードが目的の場合は、パフォーマンスが必要です。リソースのロードがあなたが望むものである間、私はページをブロックすることを疑います。つまり、本文の最後にいくつかのプリフェッチリンクを配置し、それらに偽のメディアを追加して、重要でないように見えるようにします（他のすべての後にロードされるようにするため）。次に、それらのリンクにonloadタグを追加します。そのonloadには、ページ内の実際のリソースのソースを設定するコードが含まれます。たとえば、動的iframeと組み合わせて使用​​することもできます。

前：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

後：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
    Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
      onload="myFrame.src=this.href" media="bogus" />

最初の（前に）ページがフリーズして非常に醜い方法で点滅するのに対し、コンテンツがプリロードされた2番目の（後）はページをフリーズまたは点滅させず、シームレスに瞬時に表示および非表示になることに注意してください。

2
user7892745

非表示の画像が読み込まれているかどうかはわかりませんので、おそらく image sprites を使用することをお勧めします。次に、何も表示される前にイメージ全体がロードされます。すべてのメニュー項目を1つの画像に配置して、多くのHTTPリクエストを保存することもできます。

2
Darryl Hein

それらを<img />タグとしてページに追加し、CSSを使用して非表示にできませんか？

1
Peter