Question

我有一个使用大量（60-100k）背景图像的网站，这些图像因页面而异。

当用户第一次加载页面时，首先加载页面内容，然后短时间后出现背景图像。据我所知，这是浏览器中的预期行为，但它使得页面加载在较慢的连接上看起来非常“颠簸”。

我曾想过用加载“掩码”隐藏页面，当背景图片加载时，JS会将其删除......但这仍然是一个非常丑陋的方法。

我怎样才能使页面内容和背景图像同时出现在用户身上？

Answer 1

这里最好的解决方案是尝试找到一种方法来缩小图像。那里有一些很好的压缩工具。我建议您查看ImageMagick，一些特定于JPEG的工具（http://jpegclub.org/）或特定于PNG的工具（http://www.aboutonlinetips.com/optimize-and-compress-png-files/）。

但要做你特别要求的事情 - 隐藏页面上的所有内容，直到它准备就绪然后加载 - 你可以使用jQuery并做类似的事情：

$(function(){
    var bgimage = new Image();      
    bgimage.src="{your giant image's URL goes here}";       

    $(bgimage).load(function(){
        $("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();                  
    });
});

这样做是等待所有元素都加载到页面上然后创建一个新的Image对象。我们将源指向您的较大图像文件。当完成加载后，我们更改背景以使用这个新加载的图像，因为浏览器缓存了它，所以它应立即加载。

我有fadeIn（），以防你想要隐藏页面上的所有内容，直到它准备就绪。这意味着你应该隐藏。

出于某种原因，如果采用这种方法，fadeIn（）比show（）更好，或者只是通过removeClass（）删除“隐藏”类。使用后两种方法，标签似乎调整其高度以适应页面的内容，这可能导致不完整地显示背景图像。

老实说，我并不是真的推荐这种方法：p

至少，如果您准备好隐藏页面上的所有内容，直到它准备就绪。

这可能是一种很好的方法，只有在它准备就绪时显示背景图像，避免显示部分加载的图像......

较慢的负载只是使用大图像的权衡。

Answer 2

更好的方法可能是使用jquery并在加载后淡化背景图像。您也可以在用户点击下一页之前尝试预加载下一张图片，以使其更加流畅。

如果您延迟显示内容，直到图片显示，这只会激怒您的用户。它们（可能）主要用于获取信息，因此不要触及任何延迟该过程的事物。

这个例外是一些艺术性的网站，那些不了解网站的人会点击这些东西，除了它看起来很漂亮外，他们不关心任何事情。

Answer 3

您可以使用data URIs在现代浏览器中缓解此问题，并回归到当前的IE 6/7技术。

平滑地预加载大量背景图像

3 个答案: