如何防止背景图像加载延迟导致页面加载出现白色“闪烁”？答案

【问题标题】：How to prevent the white 'flash' on page load created by background image loading delay?如何防止背景图像加载延迟导致页面加载出现白色“闪烁”？
【发布时间】：2011-11-16 17:07:47
【问题描述】：

问题是，在网络上的大多数网站上，都有背景图片。他们需要时间来加载。通常，如果图像经过优化并且足够小，则不会有问题。但是，在我的一些网站上，javascript 文件会先于页面上的任何其他内容找到加载方式，即使它们位于页脚中！这会在背景图像加载之前创建一个白色“闪光”。为什么我的 javascript 会先加载？我在很多网站上都遇到了这个问题，而且我到处都能看到。这是我目前正在开发的网站：

http://www.bridgecitymedical.com/wordpress/

谢谢！

tl;dr 如何在我的网站上延迟加载 javascript，以便背景图像在其他任何内容之前加载，从而防止在浏览器完成下载图像之前出现白色“闪烁”。

【问题讨论】：

这是一个很好的问题，但没有很好的答案。为什么？因为它是一个错误。在 CSS 和浏览器的设计之间的某个地方，有人丢球了。在背景图像完全加载之前，如果不将背景颜色显示为每个具有背景图像的 div 的错误背景，似乎不可能在 Firefox 或 Chrome 中显示或刷新页面。如果是照片，加载时间很容易需要 90 毫秒或更多。

标签： javascript css jquery-deferred

【解决方案1】：

不要延迟加载您网站的某些部分 - 如果背景图片在传输中出现错误并且永远无法到达怎么办？你的脚本永远不会加载。

相反，如果您真的不喜欢“白色”闪光灯，请将文档的背景颜色设置为更讨人喜欢的颜色，更符合您的背景图像。您可以使用相同的 css 样式：

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

它很简单，几乎没有成本，不会中断，也不会不必要地延迟下载内容。看起来你已经在做这样的事情了——我不会改变它。我认为没有人会期望您的网站在加载之前会以某种方式呈现。

【讨论】：

谢谢！我想我真的不想解决我的问题。
我预计一旦页面加载开始，屏幕上的任何内容都不会发生变化。有时没有纯色类似于图像。必须有一种方法可以完美地预加载背景图像，但数小时的搜索并没有发现它。这个答案在2021年对我不起作用，留下指定颜色的长闪光。它在 2014 年对你有用吗？

【解决方案2】：

你可以这样使用：

HTML

<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}

【讨论】：

聪明！小改进：在附加的 className 属性中添加一个空格。例如document.body.className += ' load';
@jimbo 为什么？
@Kris10an 最初我的答案使用了document.body.className += 'load';，所以如果body 标签已经有class="body-class"，那么这个类就会变成“body-classload”。目前更合适的操作类名的方法是通过classList 令牌列表。
这种疯狂是为什么即使许多新闻网站和其他以内容为中心的网站，在没有客户端脚本的情况下应该可以正常工作，但在没有启用 JS 的情况下不再工作的原因之一。

【解决方案3】：

我遇到了同样的问题，发现没有更多讨论这很奇怪。我还没有找到任何文档，但是如果您发现任何关于 RFC 的 CSS 背景图像加载优先级等内容，请发表评论。

无论如何，我发现的唯一一件事是<img> 会立即加载，而 background-image() 似乎已准备好加载 dom。

所以我的解决方案是在带有背景图像的<div> 之前放置一个<img> 和display:none。这将立即加载图像，然后立即将其用于背景图像。

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>

需要注意的一点是，在未优化的图像上仍可能出现闪烁。因此，对于 jpg，请确保压缩它们并在创建它们时设置“progressive”属性。

【讨论】：

我不知道图像何时加载。我所知道的是，这个答案对我不起作用。这是我的确切 Bootstrap 5 代码：

【解决方案4】：

我想添加一些东西，以防为身体设置黑色背景图像。我正在尝试在同一站点的页面之间进行转换。我终于用了这个（从黑色整齐地加载黑色背景，避免闪光耶！）：

html{
    background-color: black;
}

body{
    -webkit-animation: fadein 1.5s; //I use chrome
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url('wall_pattern.jpg');
    color: white;
}

【讨论】：

“你用什么”并不重要。在做web开发的时候，应该尽量做到跨浏览器兼容。

【解决方案5】：

因此，虽然更改背景颜色确实有帮助，但请务必注意，页面加载速度不快的原因可能是由于 javascript 位于页眉中。您可以通过放置您的 javascript 标签来解决此问题

<script type="text/javascript" src="/path/to/js/javascript.js"></script>

在页面的页脚中，以便在浏览器已经读取 css 并显示大部分页面后加载。我意识到这是一篇旧帖子，但我在自己思考这个问题时偶然发现了它，并意识到（通过记住我以前看过的对话和帖子）我的标题中有 js。

【讨论】：

你也可以只添加defer属性
如果任何浏览器显示一个空脚本标签的错误，包括一个javascript注释，如<script type="text/javascript" src="/path/to/js/javascript.js">/* */</script>
我的 JavaScript 已经在正文部分的底部。这个答案对我不起作用。

【解决方案6】：

我会在 css 中的图像 URL 上使用查询字符串“？201611”。这告诉浏览器要加载哪个版本的图像。因此，它不会每次都检查新版本，而是加载保存在缓存中的版本。 Flash 效果只会在第一次访问该网站时发生。

例如。 http://domain.com/100x100.jpg?201611

【讨论】：