2

リンクにカーソルを合わせると、divの背景画像を変更する必要があるWebサイトを開発しています。

それが機能する方法は次のとおりです。

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js：

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

そのため、リンクにカーソルを合わせると、divの背景画像を変更する機能があります。ただし、問題は、ページが最初に読み込まれ、リンクが初めてホバーされたときに、画像の読み込みが遅いことです。

ただし、ロードするとシームレスに機能します。これはロードする必要がある問題だと思います。それで、事前に画像をプリロードし、ホバーに同じ方法を使用する方法はありますか。

4

4 に答える 4

6

画像を1つの画像としてスタックしてから、画像のbackgroundプロパティを適切なオフセットにシフトするクラスを追加します。

これにより、複数の画像が1つのHTTPリクエストに変換されるだけでなく、画像のホバー状態をプリロードするためにわざわざコードを記述する必要がなくなります。

これはスプライトシートと呼ばれます。

于 2011-10-06T11:57:15.060 に答える
3

スプライト画像を作成できます。つまり、2つの画像を1つにまとめることができます。次に、背景の位置を変更して、画像の他の部分を表示します。たとえば、要素の高さが20ピクセルの場合、背景の位置を20ピクセル移動します。

function hoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

function hover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

単一の画像であるため、代替の外観が最初から読み込まれます。これにより、サーバーへのリクエスト数も減ります。

このように、より多くの画像を組み合わせることができます。私のウェブサイトの右上隅にある例を見ることができます。ここでは、2つの異なる状態の2つの異なるフラグに1つの画像が使用されています。

于 2011-10-06T11:59:08.040 に答える
1

次のような画像のプリロードは非常に簡単です。

var img = new Image();
img.src = "/path/to/image.jpg";

これは、window.loadまたはdom：readyイベントのどこかにある可能性があります

于 2011-10-06T11:53:59.453 に答える
0

このソリューションを使用できます。 http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

于 2011-10-06T12:05:56.427 に答える