Javascript 更快地预加载图像

我正在建立一个包含

divs

和背景图像的网站。我对JavaScript非常陌生。我想预加载图像，这样当你去网站时，你就不必等待，并在加载图像时查看一个空白框。我正在使用这个预加载代码，但当我去网站的图像仍然加载缓慢。有没有办法让这更快

<script> 
$(document).ready( function() {
    var c = new Image();
    c.onload = function(){
        $("#contenthome").css("background-image", "url(../Images/Homepage.png)");  
    }
    c.src = "url(../Images/Homepage.png)";
});
</script>

$（文档）.ready（函数（）{
var c=新图像（）；
c、 onload=函数（）{
$（“#contenthome”）.css（“背景图像”，“url（../Images/Homepage.png）”）；
}
c、 src=“url（../Images/Homepage.png）”；
});

这不是直接可以实现的，但有两种解决方案

这个问题的解决方案需要了解指定缓存信息的服务器端请求头。我习惯于

appengine

，所以我将到期时间设置为大约一个月左右。缓存就是建议浏览器“将以下图像保存一段时间，不要每次需要时都从我这里拿走”。根据您的服务器端语言，这是值得花费的，这样您就可以在浏览器环境中掌握这一重要内容

而且，如果用户在加载图像时看不到一组空白框，则必须使用一些技巧。事实上，您可以设置它们的不可见样式，一旦加载，就可以使它们可见。由于您使用的是

jquery

，因此可以使用

$（窗口）。加载(
函数（）{$（'#showAfterLoadingComplete'）.show（“slow”）.fadeIn（）}

一页示例是

尝试以下方法：

<script> 
$(function() {
    var c = new Image();
    $(c).load(function(){
        $("#contenthome").css("background-image", "url(../Images/Homepage.png)");
        $(this).attr('src','../Images/Homepage.png').show();  
    }).hide();
});
</script>

$（函数（）{
var c=新图像（）；
$（c）.加载（函数（）{
$（“#contenthome”）.css（“背景图像”，“url（../Images/Homepage.png）”）；
$（this.attr（'src'，'../Images/Homepage.png'）.show（）；
}).hide（）；
});

我建议使用另一种方法。Javascript必须等待页面加载才能正常工作，这必然会带来延迟

为什么不将所有图像编码到专用css文档中的css类中呢

您可以使用这样的网站来转换图像：

然后将数据URI粘贴到css类的background image属性中

最终的标记可能如下所示：

<div id="contenthome">[some content]</div>

#contenthome {
    background: [DATA URI] /*I didn't paste the actual URI here, as it would be quite long and unruly */
            no-repeat
            50% 50%;
    background-size: contain;
    display: inline-block;
    height: auto;
    width: auto;
}

您可能需要对高度、宽度、背景大小和显示属性进行调整，以使其显示得恰到好处

---

您甚至可以采取进一步的措施，使用缓存清单显式缓存css文件，这样加载时间会更快。

此代码将在几毫秒内运行，因此您在连接到资源时会遇到等待。我会考虑减小图像的大小在图像编辑器中加速。这也是图像精灵的用途。在代码中无法加快图像加载速度。您只能以这样一种方式加载图像，即不会阻止页面的其余部分加载，而您已经在这样做了。实际上有一种方法，但这可能会迫使您对网站进行大的更改。通过使用AJAX，您可以在页面N仍在页面上的情况下预处理页面的图像e N-1，只需使用第N页的内容更新第N-1页，而不是使用常规链接转到第N页，从而重新加载该页。正如Jasper所评论的，当您需要加载尚未显示的图片时，预加载是有用的。因此，当它们显示时，它们已经加载了……在您的情况下，显然没有use用于预加载。典型的情况是带有“newt/previous”功能的图片galery：加载图像时，也会预加载下一个图像和上一个图像，因此当用户单击“next”时，只需显示预加载的图像，而无需等待下载，因为它在后台已关闭