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

这不是直接平易近人，但有两种解决方案。

此问题的解决方案需要了解指定缓存信息的服务器端请求标头。我习惯appengine所以我设定到期约一个月左右。缓存就是建议浏览器“随身携带以下图片，不要在每次需要时随身携带”。根据你的服务器端语言，值得花钱，这样你就可以在浏览器环境中掌握这个重要的东西。
而且，如果您的用户在图片加载时不应该看到一组空白框，您必须玩一些技巧。事实上，你将它们设置为不可见，一旦加载，你就可以看到它们。由于您使用的是jquery，因此您可以使用类似
的内容
$(window).load( function(){ $('#showAfterLoadingComplete').show("slow").fadeIn(); }

示例页面为here

Answer 2

试试这个：

<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>

Answer 3

我建议采用不同的方法。 Javascript必须等待页面加载以便正常工作，这本身会引入延迟。

为什么base 64不能将所有图像编码为专用css文档中的css类。

您可以使用此类网站转换图片：

http://webcodertools.com/imagetobase64converter

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

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

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

你的CSS看起来像这样：

#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文件，以便加载时间更快。

更快地预加载图像

3 个答案: