Javascript 如何防止背景图像加载延迟导致页面加载时出现白色“闪烁”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7411541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent the white 'flash' on page load created by background image loading delay?
提问by alt
The problem is, on most sites on the web, there are background images. They take time to load. Ordinarily, it wouldn't be a problem if the images were optimized, and small enough. However, on some of my sites, the javascript files find their way to load before anything else on the page, even though they're in the footer! This creates a white "flash" before the background image loads. Why is my javascript loading first before anything else? I'm having this problem on many sites, and I see it everywhere. Here's the site I'm currently working on:
问题是，在网络上的大多数网站上，都有背景图片。他们需要时间来加载。通常，如果图像经过优化并且足够小，则不会有问题。但是，在我的某些网站上，javascript 文件会先于页面上的其他任何内容加载，即使它们位于页脚中！这会在背景图像加载之前创建一个白色的“闪光”。为什么我的 javascript 先加载？我在很多网站上都遇到了这个问题，而且到处都能看到。这是我目前正在开发的网站：
http://www.bridgecitymedical.com/wordpress/
http://www.bridgecitymedical.com/wordpress/
Thanks!
谢谢！
tl;dr How can I defer loading of javascript on my websites so that the background image loads before anything else, thus preventing that white "flash" before the browser finishes downloading the image.
tl;dr 我怎样才能推迟在我的网站上加载 javascript，以便在其他任何事情之前加载背景图像，从而防止在浏览器完成下载图像之前出现白色“闪烁”。
回答by Surreal Dreams
Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.
不要延迟加载站点的某些部分 - 如果背景图像在传输过程中出现错误并且永远不会到达怎么办？您的脚本永远不会加载。
Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:
相反，如果您真的不喜欢“白色”闪光灯，请将文档的背景颜色设置为更令人愉悦的颜色，更符合您的背景图像。您可以使用相同的 css 样式执行此操作：
body {
background: #EDEBED url(myGrayBackgroundImage.jpg);
}
It's simple, has virtually no cost, won't break, and won't delay things from downloading unnecessarily. It looks like you're already doing something like this - I wouldn't change it. I don't think anybody has the expectation that your site look a certain way beforeit loads.
它很简单，几乎没有成本，不会损坏，也不会不必要地延迟下载。看起来你已经在做这样的事情 - 我不会改变它。我认为没有人期望您的网站在加载之前以某种方式显示。
回答by 2grit
You may use something like this:
你可以使用这样的东西：
HTML
HTML
<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">
CSS
CSS
/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
display:none;
}
回答by adr1Script
I wanted to add something, in case of having a black background image set for the body. I was experimenting with transitions in between pages in the same site. I finally used this (neatly loads black-background from black, avoiding the flash yeah!):
我想添加一些东西，以防为身体设置黑色背景图像。我正在尝试在同一站点的页面之间进行转换。我终于使用了这个（从黑色整齐地加载黑色背景，避免闪光是的！）：
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;
}
回答by ggedde
I was having the same issue and found it pretty strange that this isn't talked about more. I still haven't found any documentation on this, but please comment if you find anything regarding RFC's for css background image loading priorities, etc.
我遇到了同样的问题，发现没有更多讨论这个问题很奇怪。我仍然没有找到任何关于此的文档，但是如果您发现有关 RFC 的 css 背景图像加载优先级等的任何内容，请发表评论。
Anyways, the only thing I found is that <img>load immediately while background-image() seems to load on dom ready.
无论如何，我发现的唯一一件事是<img>当 background-image() 似乎在 dom 准备好加载时立即加载。
So my solution was to place a <img>with display:nonejust before the <div>with the background image. This will load the image immediately and then it gets used immediately for the background-image.
所以我的解决方案是在背景图像之前放置一个<img>with 。这将立即加载图像，然后它会立即用于背景图像。display:none<div>
<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
- One thing to note is that you could still get flickering on images that are not optimized. So for jpg's make sure to compress them and set the "progressive" attribute when creating them.
- 需要注意的一件事是，您仍然可能会在未优化的图像上闪烁。因此，对于 jpg，请确保在创建它们时压缩它们并设置“渐进式”属性。
回答by Robert McMahan
So, while changing the background color does help it's important to note that the reason the page is not loading quickly is likely due to javascript being in the header. You can remedy this by putting your javascript tags
因此，虽然更改背景颜色确实有帮助，但重要的是要注意页面加载不快的原因可能是由于 javascript 位于标题中。您可以通过放置 javascript 标签来解决此问题
<script type="text/javascript" src="/path/to/js/javascript.js"></script>
in the footer of your pages so that it loads after the browser has already read the css and displayed most of the page. I realize this is an old post, but I happened upon it while thinking about this problem myself and realized (through remembering conversations and posts I'd seen before) that I had the js in my header.
在页面的页脚中，以便在浏览器已经读取 css 并显示大部分页面后加载。我意识到这是一篇旧帖子，但我在自己思考这个问题时偶然发现了它，并意识到（通过记住我以前看过的对话和帖子）我的标题中有 js。
回答by SequenceDigitale.com
I would use a query string "?201611" on the image URL in css. This tells the browser which version of the image to load. So instead of checking for new version every time, it will load the version kept in cache. The flash effect will happens only the first time the website is visited.
我会在 css 中的图像 URL 上使用查询字符串“？201611”。这告诉浏览器要加载哪个版本的图像。因此，它不会每次都检查新版本，而是加载缓存中保存的版本。Flash 效果只会在第一次访问网站时发生。
