顺利预加载大背景图片答案

【问题标题】：Smoothly preload largeish background images顺利预加载大背景图片
【发布时间】：2010-07-09 01:20:23
【问题描述】：

我有一个网站，它使用因页面而异的大型 (60-100k) 背景图片。

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

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

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

【问题讨论】：

标签： javascript css image background preload

【解决方案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

至少，如果您要在页面准备好之前隐藏页面上的所有内容，则不会。

这可能是一种仅在准备就绪时才显示背景图像的好方法，从而避免显示部分加载的图像...

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

【讨论】：

【解决方案2】：

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

如果您延迟显示内容，直到图像显示出来，它只会激怒您的用户。他们（可能）主要是为了获取信息，所以永远不要接触任何会延迟该过程的东西。

例外情况是一些附庸风雅的网站，那些不了解网站的人来点击东西，除了看起来漂亮之外他们不关心任何东西。

【讨论】：

100k 背景图像对我来说听起来有点艺术屁。我会让身体背景颜色与背景图像相似。然后用户可以开始使用该网站。预加载所有背景图片可能是最好的办法。
是的，老实说，这是一个相当艺术的放屁创意。大约有 30 个单独的背景图像，并且无法知道用户接下来会去哪一个，所以我认为预加载有点不启动？您在背景图像中淡入淡出的想法听起来不错，尽管我认为我们会使用它，干杯。

【解决方案3】：

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

【讨论】：