网站加载时如何摆脱色彩的闪烁

Question

在https://latestfooty.co.uk加载我的网站时，在加载网站之前总是会出现灰色的闪烁。该网站是一个相对轻量级的着陆页，不应花很长时间来加载，因此我怀疑问题是由于线性渐变和扫描线效果的组合，而我将其用作背景图像。以前，我使用SVG solution来生成扫描线而不是图像，并且“闪光”效果非常明显，以至于我不得不切换回图像方法。

我如何摆脱网站上的这种闪光现象，从而将其平稳地加载到用户身上？

编辑：PageSpeed analysis似乎并没有暗示任何错误，即使有很明显的暗示，这也可能不是性能问题，而是更多的错误。

Answer 1

如果您是说图片出现前白色文字后面的灰色，那几乎可以肯定是花费在下载背景图形上的时间。

您当前（撰写本文时）的背景设​​置为：

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，以便仅调用尺寸足够大以填充视口屏幕的图像。

  仅此一项并不能解决问题，但绝对可以帮助re：文件大小。您当前的图像为2,343px×1,080px，这在台式机/电视尺寸的屏幕上将是巨大的。

  您需要创建许多不同尺寸的图像才能实施此操作。

Answer 2

尝试这个body{ background:none important }