防止渐进式（逐行）加载背景图像答案

【问题标题】：Prevent progressive (line by line) loading of background image防止渐进式（逐行）加载背景图像
【发布时间】：2012-07-31 13:41:16
【问题描述】：

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

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

谢谢，

【问题讨论】：

【解决方案1】：

jsfiddle http://jsfiddle.net/9fFKT/3/

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

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

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

【讨论】：

【解决方案2】：

基本上，您需要在初始加载时隐藏元素，或者在 CSS 中设置 no 背景，通过 JavaScript 添加图像，然后通过 onload 事件应用 CSS 背景每张图片。

仅 CSS 无法做到这一点。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

现有不同的程序或网站来减少您的网络图像（不损失质量）对于示例，Yahoo SMUSH.IT! 非常适合！

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

【讨论】：