网站加载时如何消除颜色闪烁
How to get rid of flash of colour when website loads
在 https://latestfooty.co.uk, there's always a flash of grey before the site loads. The site is a relatively lightweight landing page that shouldn't be taking this long to load, so I suspect the issue is due to the combination of linear gradients and scanline effects that I'm using as background images. Previously I was using an 加载我的网站以生成扫描线而不是图像时，"flash" 效果非常明显，我不得不切换回图像方法。
我怎样才能从我的网站中去除这种颜色闪烁，以便用户更顺畅地加载它？
编辑：PageSpeed analysis 似乎没有任何问题，尽管非常明显，这表明这可能不是性能问题，而是更多的错误。
试试这个 body{ background:none important }
如果你指的是图片出现前白色文字后面的灰色，这几乎可以肯定是下载背景图片所花费的时间。
您当前（撰写本文时）的背景设置为：
html {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),
url('images/StockSnap_POIHJNTKDB_1920.jpg') right/cover;
}
这表明在加载背景图像之前应用了灰色（不透明度为 50% 的黑色）线性渐变。
您有几个选项可以对此进行改进，执行以下任一操作（组合或单独执行）：
- Preloader that Zen references是一个选项。这看起来您需要将此产品作为一个整体来安装才能使用它的这个单一功能，这实际上可能会给您带来更多的开销。
- 您可以将灰色背景更改为其他颜色或将其完全删除。
- 您可以减小背景图像的图像文件大小（当前为 686kb）以使其加载速度更快。
- 您的 PageSpeed Insights 表明您没有缓存此图像（或任何图像），这可以提高加载性能。 PageSpeed Insights 可能未设置为判断 CSS 资源，这就是它给您高分的原因。
您可以应用一些 CSS @media queries 以便您只调用尺寸足以填满视口屏幕的图像。
仅此一项并不能解决问题，但肯定会帮助解决文件大小问题。您当前的图像是 2,343px × 1,080px，这在 desktop/TV 大小的屏幕上会很大。
您需要创建大量不同尺寸的图像才能执行此操作。
在 https://latestfooty.co.uk, there's always a flash of grey before the site loads. The site is a relatively lightweight landing page that shouldn't be taking this long to load, so I suspect the issue is due to the combination of linear gradients and scanline effects that I'm using as background images. Previously I was using an
我怎样才能从我的网站中去除这种颜色闪烁，以便用户更顺畅地加载它？
编辑：PageSpeed analysis 似乎没有任何问题，尽管非常明显，这表明这可能不是性能问题，而是更多的错误。
试试这个 body{ background:none important }
如果你指的是图片出现前白色文字后面的灰色，这几乎可以肯定是下载背景图片所花费的时间。
您当前（撰写本文时）的背景设置为：
html {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),
url('images/StockSnap_POIHJNTKDB_1920.jpg') right/cover;
}
这表明在加载背景图像之前应用了灰色（不透明度为 50% 的黑色）线性渐变。
您有几个选项可以对此进行改进，执行以下任一操作（组合或单独执行）：
- Preloader that Zen references是一个选项。这看起来您需要将此产品作为一个整体来安装才能使用它的这个单一功能，这实际上可能会给您带来更多的开销。
- 您可以将灰色背景更改为其他颜色或将其完全删除。
- 您可以减小背景图像的图像文件大小（当前为 686kb）以使其加载速度更快。
- 您的 PageSpeed Insights 表明您没有缓存此图像（或任何图像），这可以提高加载性能。 PageSpeed Insights 可能未设置为判断 CSS 资源，这就是它给您高分的原因。
您可以应用一些 CSS
@mediaqueries 以便您只调用尺寸足以填满视口屏幕的图像。仅此一项并不能解决问题，但肯定会帮助解决文件大小问题。您当前的图像是 2,343px × 1,080px，这在 desktop/TV 大小的屏幕上会很大。
您需要创建大量不同尺寸的图像才能执行此操作。