javascript - 更快地预加载图像

Question

我正在构建一个包含带有背景图片的 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>

Answer 1

这不是直接可行的，但有两个解决方案。

1. 这个问题的解决方案需要对指定缓存信息的服务器端请求 header 有所了解。我习惯了 appengine，所以我将到期时间设置为大约一个月左右。缓存就是建议浏览器“将以下图像保留一段时间，不要在每次需要时都从我这里拿走”。根据你的服务器端语言，花钱是值得的，这样你就可以在浏览器环境中掌握这个重要的东西。

2. 而且，如果您的用户不应该在加载图像时看到一组空白框，那么您必须使用一些技巧。事实上，您将它们设置为不可见的样式，一旦加载，您就可以使它们可见。因为您使用的是 jquery，所以您可以使用类似

   的东西

   $(窗口).load( function(){ $('#showAfterLoadingComplete').show("slow").fadeIn(); }

例子的一页是here