如何防止白色'闪烁'对页面加载造成的背景图片加载延迟

How to prevent the white 'flash' on page load created by background image loading delay?

本文关键字：加载 延迟 背景图片 白色 何防止 闪烁      更新时间：2023-09-26

问题是，在大多数网站上，都有背景图片。它们需要时间来加载。通常，如果图像经过优化并且足够小，这不会是一个问题。然而，在我的一些网站上，javascript文件找到他们的方式加载之前的任何其他在页面上，，即使他们在页脚!这将在背景图像加载之前创建一个白色的"闪光"。为什么我的javascript在其他东西之前加载?我在很多网站上都遇到了这个问题，而且到处都是。这是我目前正在做的网站:

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

谢谢!

我怎样才能在我的网站上延迟加载javascript，使背景图像先于其他内容加载，从而防止在浏览器完成下载图像之前出现白色"闪光"

不要延迟加载站点的某些部分——如果背景图像在传输过程中出现错误而无法到达怎么办?你的脚本永远不会加载。

相反，如果你真的不喜欢"白色"闪光，设置文档的背景颜色为更令人愉快的颜色，更符合你的背景图像。你可以使用相同的css样式:

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

它很简单，几乎没有成本，不会损坏，也不会不必要地延迟下载。看起来你已经在做这样的事情了——我不会改变的。我想没有人期望你的网站在加载之前是某种样子的

您可以这样使用:

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

我有同样的问题，发现这是相当奇怪的，这不是谈论更多。我还没有找到任何关于这方面的文档，但如果你发现任何关于css背景图像加载优先级等RFC的信息，请评论。

无论如何，我发现的唯一一件事是<img>加载立即，而背景图像()似乎加载dom准备好了。

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

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
    有一件事要注意的是，你仍然可以得到闪烁的图像，没有优化。所以，对于jpg格式，一定要压缩它们，并在创建它们时设置"progressive"属性。

我想添加一些东西，以防为body设置黑色背景图像。我尝试在同一站点的页面之间进行过渡。我最终使用了这个(巧妙地从黑色加载黑色背景，避免了闪光灯，耶!):

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

所以，虽然改变背景颜色确实有帮助，但重要的是要注意页面不能快速加载的原因可能是由于javascript在标题中。你可以通过添加javascript标签

来解决这个问题
<script type="text/javascript" src="/path/to/js/javascript.js"></script>

放在页面的页脚，以便在浏览器已经读取CSS并显示页面的大部分内容后加载。我意识到这是一个旧的帖子，但我碰巧在思考这个问题的时候我自己意识到(通过回忆我以前见过的对话和帖子)，我在我的标题中有js。

如果你改变渲染时间，它应该会阻止人们被你的页面加载白色flash。

我会使用查询字符串"?201611"在css中的图片URL。这告诉浏览器加载哪个版本的图像。因此，它将加载保存在缓存中的版本，而不是每次检查新版本。flash效果只会在第一次访问网站时出现。

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

相关文章：