0

必要となるすべての画像を手動でプリロードするスクリプトがあります。次のようになります。

<script type="text/javascript">
(new Image()).src = "/images/buttonpinkpressed.png";
(new Image()).src = "/images/smallbuttonpinkpressed.png";
</script>

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

ここで、使用中のすべてをプリロードする1つのユニバーサルスクリプトを使用したいと思います。

ドキュメント内のjQueryのようなセレクター（たとえば、すべてのボタンを取得するには$（'buttons'））を使用してすべての要素を列挙する必要があります。次に、これは私にとって最も難しい部分です。要素の結果であるスタイルを見つけます。 classと'active'クラス（：active pseudoclassと混同しないでください。ただし、違いはありません）。

たとえば、次のボタンがあります。

<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');
}

明らかに、このボタンの場合、プリロードされた画像は最後の画像である必要があります。これは、「小さい」と「ピンク」が明示的に定義されており、「アクティブ」が私たちが探しているものだからです。

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

したがって、問題はスタイルをどのようにフィルタリングするかです。

よろしく、

アップデート

ご覧のとおり、最初はボタンに「アクティブ」スタイルはありません。スクリプトオンタッチイベントで追加されています（Android Webkitは実際の：activeをサポートしていないため）。そのため、画像は別のスクリプトからプリロードする必要があります。そして、はい、クリックするとアクティブ状態の画像が実行時に読み込まれるのがわかります。見た目は醜いです。

4

1 に答える 1

1

スプライトを使用して、background-positionを変更するだけです。そうすれば、ブラウザは1つのリクエストを実行するだけで済み、通常の状態が表示されるはずなので、プリロードを実行する必要はありません。また、レンダリングされた画像の位置を変更するだけなので、状態の切り替えが速くなります（個別の画像が遅いということではなく、効率が低下するだけです）。

于 2012-04-13T05:07:39.533 に答える