jquery - 在网页中快速加载图像

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>

当我聚焦或单击文本框时，我使用 jQuery 添加了类 focus到 <input> 周围的两个跨度标签并且给出不同的 background图像(左和右)以突出显示文本框已获得焦点。

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

Answer 1

尝试尽快预加载焦点图像，但不要显示它

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

这将确保图像已经加载到页面中，即使页面完全加载后页面并不真正需要显示它。

一旦jquery/javascript需要图片，浏览器就不会再请求图片资源