1

私は自分のページでテキスト ボックスを使用しています。テキスト ボックスの画像を使用して、UI の見栄えを良くしました (テキスト ボックスに画像を重ねる)。テキスト ボックスの画像の左側の部分を使用しました (私のカスタム画像テキスト ボックス用) と右側部分の画像を作成し、以下のようにタグを囲む 2 つのタグの background プロパティを使用してこれら 2 つの画像を適用します<span>。<input>

<span class="right-side-BG-image-for-test-box>
    <span class="left-side-BG-image-for-test-box>
       <input/>
    </span>
</span>

テキストボックスにフォーカスまたはクリックしている間、jQueryを使用して、タグをfocus囲む2つのスパンにクラスを追加し、テキストボックスがフォーカスされていることを強調するために異なる画像(左と右)を提供します。<input>background

私の質問は、4 つの img タグを使用することによって (source 属性を持つテキスト ボックスの前に、display:nonecss プロパティでこれらの 4 つの画像 (2 つの通常の画像と 2 つのフォーカス画像) の画像パスを参照することで、画像の読み込み時間が改善されるかどうかです。ユーザーがテキストボックスをクリックしたときに、フォーカス画像の読み込みにタイムラグが発生することをユーザーに経験させたくないので?. 回答ありがとうございます。

4

2 に答える 2

2

フォーカス画像をできるだけ早くプリロードしようとするが、まだ表示しない

<img src='home-focus.jpg' style='display:none;'>
<img src='about-focus.jpg' style='display:none;'>

これにより、ページが完全に読み込まれると、ページが実際に画像を表示する必要がない場合でも、画像がページに既に読み込まれていることが保証されます。

jquery/javascript で画像が必要になると、ブラウザーは画像リソースを再度要求しなくなります。

于 2012-09-17T08:48:00.337 に答える
0

で画像を使用して、クラスbackgroundに渡すだけですbackground:none;input:focus

CSS

input{
background:url('xxx.jpg') no-repeat 0 0;
}

input:focus{
background:none;
}
于 2012-09-17T08:55:59.447 に答える