快速加載圖像在網頁中

Question

我使用文本框在我的網頁，我使用的圖像文本框，使用戶界面更好看（疊加文本框中的圖片）。我使用的左側部分文本框圖像（文本框我的自定義圖像）和右側部分的圖像和應用使用兩個<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到圍繞<input>標籤和兩個跨這給不同background圖像（左和右）突出，該特t盒專注。

我的問題是，通過使用四個img標籤（在源屬性指向這四個圖像的圖像路徑（兩個正常和兩個焦點圖像）並具有display:none css屬性的文本框之前）是否會改善負載圖像的時間？因爲我不想讓用戶體驗到一定的時間滯後在加載焦點圖像時，用戶點擊文本框？先謝謝您的回答。

Answer 1

嘗試儘快預裝的焦點圖片可能但不顯示它

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

這將確保圖像已加載頁面甚至頁面並不真正需要展示它一旦頁面完全加載。

一次了jQuery/JavaScript需要的圖像，瀏覽器不會請求圖像資源再次

Answer 2

您可以將在background使用的圖片，只是給background:none;你input:focus類

CSS

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

input:focus{ 
background:none; 
}