41

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

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

谢谢！

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

4

6 回答 6

57

不要延迟加载您网站的某些部分——如果背景图像在传输中出现错误并且永远不会到达怎么办？你的脚本永远不会加载。

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

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

它很简单，几乎没有成本，不会中断，也不会不必要地延迟下载内容。看起来你已经在做这样的事情了——我不会改变它。我认为没有人会期望您的网站在加载之前会以某种方式呈现。

于 2011-09-14T05:22:50.700 回答
21

你可以使用这样的东西：

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;
}
于 2011-09-14T05:19:56.487 回答
3

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

无论如何，我发现的唯一一件事是<img>立即加载，而 background-image() 似乎已准备好加载 dom。

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

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
  • 需要注意的一件事是，您仍然可能会在未优化的图像上闪烁。因此，对于 jpg，请确保压缩它们并在创建它们时设置“渐进式”属性。
于 2019-10-07T22:39:00.293 回答
1

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

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;
}
于 2016-09-28T20:59:37.550 回答
0

因此，虽然更改背景颜色确实有帮助，但重要的是要注意页面无法快速加载的原因可能是由于 javascript 在标题中。您可以通过放置您的 javascript 标签来解决此问题

<script type="text/javascript" src="/path/to/js/javascript.js"></script>

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

于 2015-10-12T02:02:51.823 回答
-2

我会在 css 中的图像 URL 上使用查询字符串“？201611”。这告诉浏览器要加载哪个版本的图像。因此，它不会每次都检查新版本，而是加载保存在缓存中的版本。Flash 效果只会在第一次访问该网站时发生。

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

于 2016-11-06T17:19:40.040 回答