4

<a>次のような特定の画像の背景にタグを設定した場合:

HTML:
<a href="..." title="click here">Click Here</a>

CSS:
a {
  background: transparent url(button.png);
}

次のように、ユーザーがスポットにカーソルを合わせるたびに背景が変わるようにします。

CSS:
a {
  background: transparent url(button_HOVER.png);
}

ユーザーがリンクにカーソルを合わせると、ホバー背景画像がちらつきます (完全に読み込まれるまで約 1 ～ 2 秒かかります)。

ファイルを GIF として保存し、そのサイズと読み込み時間を短縮することもできますが、それはwould harm my specific image tremendously(ファイルが大きく、非常にグラフィカルです)。

そのため、ブラウザの画像キャッシュ機能を頼りにするなど、より良い解決策を探していました。したがって、次のようなボタンにスタイルを適用します。

CSS:
a {
  background: transparent url(button_HOVER.png);
  background: transparent url(button.png);
}

画像 button_HOVER が最初にキャッシュされるようにします。「ちらつき」に影響しているように見えますが、完全ではありません。HOVER 画像で非表示のタグを作成することを考えたので、結果が異なる可能性があります。

それを解決するためのより良い方法があると思いますか? （ファイルをPNGとして保持したいことを強調します。重さは6〜7kです）。私の方法は効率的ですか？

4

3 に答える 3

8

解決策は、両方の画像（ホバーとアクティブ）を同じ画像ファイルに入れることです。互いの上に配置されます。イメージスプライトとも呼ばれます。ブラウザは画像ファイル全体をロードします。ホバーすると、背景の位置を変更するだけです。

アクティブな画像が一番上にあり、ホバー画像がその真下にあると仮定すると、cssコードは次のようになります。

a.link {
  width:70px;
  height:24px;
  background: url(image.png) top no-repeat;
}
a.link:hover {
  background-position: bottom;
}

背景の位置に注意してください。ここでは上と下を使用します。ピクセル単位で正確に指定することもできます。この例の画像全体の幅は70ピクセル、高さは48ピクセルになります。一部のサイトでは、すべての小さなアイコンを1つの画像にまとめています。完全にロードし、リクエストも節約します。:)

この場合、プリロードスクリプトは必要ありません。

于 2010-03-07T14:40:56.953 に答える
2

使用可能な基本的なオプションは、ビューアから非表示になっているhtml要素を使用するか、javascriptを使用することです。

ただし、htmlアプローチはおそらく最も単純です。

<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>

with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }

または、javascriptを使用します。

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

jQueryアプローチは、このページから完全に削除されました。http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript。

おそらく最善のアプローチは、リヨンが示唆しているように、cssイメージスプライトです。

于 2010-03-07T14:41:23.240 に答える
1

You should search about this topic "preload images" You will find ways to preload images using css and javascript.
I believe that if you put a hidden image with source equal the src of png images you will use in the css files, this will make the images loaded when the page loads, and CSS work will be just switch preloaded images.

于 2010-03-07T14:37:57.043 に答える