1

我在我的页面中使用文本框，我使用文本框的图像使 UI 看起来更好（将图像叠加在文本框上）。我使用文本框图像的左侧部分（我的自定义图像对于文本框）和右侧部分图像，并使用两个<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图像（左和右）以突出显示文本框已聚焦。

我的问题是，通过使用四个 img 标签（在具有源属性的文本框之前引用具有display:nonecss 属性的这四个图像（两个普通图像和两个焦点图像）的图像路径，是否会提高图像的加载时间？，因为我不希望用户在用户单击文本框时在加载焦点图像时遇到一些时间延迟？提前感谢您的回答。

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 回答