当前位置：文江博客话题详情

顺利预加载较大的背景图像

发布于 2024-09-08 08:46:24 字数 223 浏览 5 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

方圜几里 2024-09-15 08:46:24

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

但是要做你特别要求的事情 - 隐藏页面上的所有内容，直到它准备好然后加载 - 你可以使用 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

至少，如果您要隐藏页面上的所有内容直到准备好，则不推荐。

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

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

The best solution here would be to try and find a way to get that image smaller. There are some good compression tools out there. I recommend looking at ImageMagick, some JPEG-specific tools (http://jpegclub.org/) or PNG-specific tools (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).

But to do what you're specifically asking - hide everything on the page until it's ready and then have it load in - you could use jQuery and do something like this:

$(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();                  
    });
});

What this does is it waits until all the elements are loaded on the page and then creates a new Image object. We point the source to your larger image file. When that is finished loading, we change the background to use this newly loaded image, which should load instantly because the browser cached it.

I have fadeIn() there in case you want to hide all of the content on the page until it's ready. This means you should make the hidden.

For some reason fadeIn() works better than show() or simply removing a "hidden" class via removeClass(), if you take that approach. With the latter two approaches the tag seems to resize its height to fit the content of the page which can result in not displaying the background image in its entirety.

Honestly though, I don't really recommend this approach :p

At least, not if you're going to hide all the content on the page until it's ready.

This might be a good approach for displaying the background image only when it's ready, avoiding the partially loaded image being displayed...

A slower load is just the tradeoff for using large images.

回复收藏 0 原文