css - 防止渐进式（逐行）加载背景图像

Question

我正在寻找一种让背景图像（CSS）加载的方法，就好像它们在加载后就出现了一样，而不是“向下滚动”。我宁愿让图像在一次闪光中延迟 300 毫秒出现，而不是让它看起来像一个糟糕的 PowerPoint 效果。

任何可以使用的技术或特定代码（除了缓存）？

谢谢，

score 4 · Accepted Answer

$("#bg").hide();
$('#bg').load(function(){

  $('#bg').show();
});

使用jquery，您可以隐藏直到它加载并在加载后显示它

score 1 · Accepted Answer

基本上，您需要在初始加载时隐藏元素，或者在 CSS 中没有设置背景，通过 JavaScript 添加图像，然后将 CSS 背景与每个图像的 onload 事件一起应用。

单靠 CSS 无法做到这一点。

score 1 · Accepted Answer

您可以将图像加载为隐藏在页面顶部，因此当您稍后将其放入 DOM 时，它是一个缓存副本。或者，您可以在其上放置一个隐藏属性，并在 300 毫秒计时器后，关闭隐藏。后者会更有把握地做你想做的事，但这取决于你的观众的网络速度。

score 0 · Accepted Answer

首先，如果您的图像出现在“向下滚动”中，则它的图像太重了。

存在不同的程序或网站以减少您的网络图像（不损失质量），例如 Yahoo SMUSH.IT！有好处！

之后，我不知道是否存在下载后出现背景图像的方法......也许在JavaScript中......

4 回答 4