0

ナビゲーションには約 10 個のリンクがあります。たとえば、最初に読み込まれる画像 main_image.png と、表示されない main_image_up.png という 2 つの画像があります。

この大規模な機能をすべて効率的な関数に組み込むために、使用する最善の方法/手法は何でしょうか?

これが私の現在のコード、単純な構造です。すべての画像が異なることに注意してください。

    <div>
<img src="http://cdn4.blogs.babble.com/strollerderby/files/2011/06/test-100x100.jpg"/>
    <p>Directory</p>
    </div>

JSフィドル

前もって感謝します、クリス

4

1 に答える 1

2

個人的には、画像をスプライトして CSS を使用します。

たとえば、Newgrounds.comを見てみましょう。ナビゲーションバーを見てください。ホバー/クリックすると、色が変わります。

次に、実際のナビゲーション バーの画像を見てください。

3 つの状態はすべて 1 つのイメージです。要素の状態に応じて画像の背景位置をシフトするだけです。

20 個の画像 (それぞれ 10 個のリンク / 2 個の画像) を読み込む代わりに、1 つだけを読み込むので、これを行うことをお勧めします。これにより、ブラウザはサーバーに対して 19 回の余分な呼び出しを行う必要がなくなり、時間を節約して処理を高速化できます。

それらが何であるか、それらの使用方法などを説明する素晴らしい記事については、CSS-Tricksをご覧ください。

于 2013-03-30T10:15:17.480 に答える