在网页中快速加载图像答案

【问题标题】：quickly loading images in a webpage在网页中快速加载图像
【发布时间】：2014-05-20 08:39:28
【问题描述】：

我在我的页面中使用文本框，我使用文本框的图像使 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:none css 属性的这四个图像（两个正常图像和两个焦点图像）的图像路径，将改善图像的加载时间？，因为我不希望用户在用户单击文本框时在加载焦点图像时遇到一些时间延迟？提前感谢您的回答。

【问题讨论】：

【解决方案1】：

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

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

这将确保图像已经加载到页面中，即使页面在页面完全加载后实际上不需要显示它。

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

【讨论】：

【解决方案2】：

您可以在background 中使用图像，然后将background:none; 提供给您的input:focus 类

CSS

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

input:focus{
background:none;
}

【讨论】：