Question

我正在使用页面中的文本框，我使用文本框中的图像使UI看起来更好（在文本框上叠加图像）。我使用了文本框图像的左侧部分（我的自定义图像文本框）和右侧部分图像，并使用<span>标记围绕<input>标记的两个<span class="right-side-BG-image-for-test-box> <span class="left-side-BG-image-for-test-box> <input/> </span> </span>标记的背景属性应用这两个图像

focus

当我关注或单击文本框时，使用jQuery我将类<input>添加到background标记周围的两个范围，并提供不同的display:none图像（左和右）突出显示文本框是聚焦的。

我的问题是，通过使用四个img标签（在具有源属性的文本框之前引用具有{{1}} 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;
}

快速加载网页中的图像

2 个答案: