问题在于，大多数网站都有背景图片。它们需要时间来加载。通常情况下，如果这些图片被优化并且足够小的话，这不会是一个问题。然而，在我的一些网站上，javascript文件以某种方式在页面上任何其他内容之前加载，即使它们位于页脚中！这会在背景图片加载之前创建一个白色的“闪光”效果。为什么我的javascript会先于其他任何东西加载？我在许多网站上都遇到了这个问题，并且到处都能看到它。以下是我目前正在工作的网站：
http://www.bridgecitymedical.com/wordpress/
谢谢！
tl;dr 我该如何推迟加载我的网站上的javascript，以便在浏览器完成图像下载之前加载背景图像，从而防止那种白色“闪光”。
不要延迟加载站点的部分内容 - 如果背景图像传输时出现错误并且永远无法到达，那么您的脚本将永远无法加载。
相反，如果您真的不喜欢“白色”闪烁，请将文档的背景颜色设置为更令人愉悦的颜色，并与您的背景图像更加协调。您可以在同一 CSS 样式中完成此操作：
body {
background: #EDEBED url(myGrayBackgroundImage.jpg);
}
这很简单，几乎没有成本，不会出现故障，并且不会延迟不必要的下载。看起来您已经在做类似的事情-我不建议更改它。我认为没有人期望您的站点在加载之前以某种特定方式显示。
<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">
/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
display:none;
}
document.body.className += ' load'; - jimbodocument.body.className += 'load';，因此如果 body 标签已经有了 class="body-class"，那么 class 将变成 "body-classload"。目前更合适的操作类名的方式是通过 classList token 列表。 - kbtz<img>会立即加载，而background-image()似乎会在dom准备好后才会加载。<div>之前放一个带有display:none的<img>。这将立即加载图像，然后它就可以立即用于背景图片。<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
如果网页的背景设置为黑色图片，我想要添加一些内容。我正在尝试在同一站点的页面之间实现过渡效果。最终我使用了这个方法（从黑色平滑加载到黑色背景，避免了闪烁）：
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>
defer 属性 - Kris10an我会在 CSS 中的图像 URL 上使用查询字符串“?201611”。这将告诉浏览器加载哪个版本的图像。因此，它不会每次检查新版本，而是加载缓存中保存的版本。Flash 效果只会在第一次访问网站时发生。
