快速加载图像在网页中

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