Question

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

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

谢谢！

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

Answer 1

请勿延迟加载您网站的部分内容 - 如果背景图片传输错误并且从未到达，会怎样？你的脚本永远不会加载。

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

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

这很简单，几乎没有成本，不会破坏，也不会延误不必要的下载。看起来你已经在做这样的事了 - 我不会改变它。我认为任何人都不希望您的网站在加载之前以某种方式显示。

Answer 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;
}

Answer 3

我遇到了同样的问题，发现没有多谈论这件事很奇怪。我仍然没有找到任何文档，但是如果您发现有关RFC的CSS背景图片加载优先级等方面的内容，请发表评论。

无论如何，我发现的唯一发现是<img>立即加载，而background-image（）似乎已在dom准备就绪时加载。

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

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

要注意的一件事是，在未优化的图像上仍然可能会闪烁。因此，对于jpg，请确保对其进行压缩并在创建它们时设置“ progressive”属性。

Answer 4

因此，虽然更改背景颜色确实有助于注意页面未快速加载的原因可能是由于javascript位于标题中。您可以通过添加javascript标记来解决此问题

format-patch

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

Answer 5

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

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;
}

Answer 6

我会使用查询字符串＆＃34;？201611＆＃34;在css中的图像URL上。这告诉浏览器要加载哪个版本的图像。因此，不是每次都检查新版本，而是加载保存在缓存中的版本。只有在第一次访问网站时才会出现闪光效果。

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

如何防止由背景图像加载延迟造成的页面加载时出现白色'闪烁'？

6 个答案:

HTML

CSS