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

Question

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

alt*_*alt 30 javascript css jquery-deferred

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

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

谢谢!

文艺青年最爱的我如何可以推迟的JavaScript加载在我的网站上,这样别的,从而防止白"闪光"浏览器之前完成下载图像之前的背景图像加载.

Answer 1

Sur*_*ams 51

不要延迟加载您网站的部分内容 - 如果背景图像在传输过程中出错并且从未到达,该怎么办？你的脚本永远不会加载.

相反,如果您真的不喜欢"白色"闪光灯,请将文档的背景颜色设置为更令人愉悦的颜色,更符合您的背景图像.您可以使用相同的css样式执行此操作:

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

Run Code Online (Sandbox Code Playgroud)

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

谢谢！我想我真的不想解决我的问题，是吗。 (2认同)
页面已设置为黑色，但重新加载仍闪烁白色。 (2认同)

Answer 2

kbt*_*tzr 19

你可以使用这样的东西:

HTML

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

Run Code Online (Sandbox Code Playgroud)

CSS

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

Run Code Online (Sandbox Code Playgroud)

聪明的！小改进：在附加的 className 属性中添加一个空格。例如`document.body.className += 'load';` (2认同)
@Kris10an 最初我的答案使用了`document.body.className += 'load';`，所以如果 body 标签已经有一个 `class="body-class"`，这个类就会变成“body-classload”。目前，更合适的操作类名的方法是通过 [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) 令牌列表。 (2认同)

Answer 3

gge*_*dde 5

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

不管怎样，我发现的唯一的事情是<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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	14 年，3 月前
查看次数：	59162 次
最近记录：	6 年，2 月前