1

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

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

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

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

4

3 回答 3

4

这里最好的解决方案是尝试找到一种方法来缩小图像。有一些很好的压缩工具。我建议查看 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

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

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

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

于 2010-07-08T17:00:01.820 回答
1

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

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

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

于 2010-07-08T16:15:17.513 回答
1

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

于 2010-07-08T17:20:23.083 回答