イメージプリロード問題

Question

必要なすべてのイメージを手動でプリロードするスクリプトがあります。これは次のようになります。

実際には、すべてのタイプのボタンやその他の要素には、このようなエントリがたくさんあります。最も悪いことは、プロジェクトが進行中であり、新しいボタンが毎日追加されているため、リストに追加するのを忘れてしまうことです。

ここでは、使用中のすべてをプリロードする汎用スクリプトを使用したいと思います。

その後、文書内の（すべてのボタンを取得すると言う、$（「ボタン」））jQueryのようなセレクタを持つすべての要素を列挙しなければならない - これは私にとって最も難しい部分である - あるスタイルを見つけます要素のクラスと 'アクティブな'クラスの結果（混同しないでください：アクティブな擬似クラスですが、違いはありません）。

<button type="button" class="small pink"><p>Menu</p></button> 

そして、次のCSSがある：例えば、

をボタンがあります明らかに

button.pink.large 
{ 
    background-image: url('buttonpinknormal.png'); 
} 
button.pink.large.active 
{ 
    background-image: url('buttonpinkpressed.png'); 
} 
button.pink.small 
{ 
    background-image: url('buttonpinksmallnormal.png'); 
} 
button.pink.small.active 
{ 
    background-image: url('buttonpinksmallpressed.png'); 
} 

は、このボタンにプリロード画像は、小さな」以来、最後の1でなければなりません「ピンク」は明示的に定義されており、「アクティブ」は私たちが探しているものです：

button.pink.small.active 
{ 
    background-image: url('buttonpinksmallpressed.png'); 
} 

estionはスタイルをフィルタリングする方法です。

よろしく、

あなたが見ることができるように

UPDATE、最初にボタンが何の 'アクティブ' なスタイルを持っていません。タッチイベントでスクリプトが追加されています（Android Webkitはreal：activeをサポートしていないため）。そのため、別のスクリプトから画像をプリロードする必要があります。そして、はい、クリック時にアクティブ状態の画像の実行時の読み込みが表示されますが、それはうんざりしています。

Answer 1

スプライトを使用してbackground-positionを変更するだけで、ブラウザは1回のリクエストを行うだけで、通常の状態を表示する必要があるため、プリロードする必要はありません。また、レンダリングされたイメージを再配置するだけで、状態の切り替えが速くなります（別々のイメージが遅くて効率的ではありません）。