在主页上预加载背景图片答案

【问题标题】：preloading background image on homepage在主页上预加载背景图片
【发布时间】：2011-10-24 23:58:36
【问题描述】：

我有一个主页，其中包含大量用于填充 div 的 php 代码（包括带有验证的时事通讯注册、mysql 数据库中的内容和各种静态图像）。整个页面建立在背景交叉淡入淡出的javascript之上。

这一切都很好，看起来不错.....但是 - 加载页面时，最后出现的“div”是背景图像 - 有效地创建了一个大的“空白”，直到所有 div 都加载并渲染背景图像。

有没有一种方法可以先加载第一张背景图片，这样用户在导航到网站时就不会留下这个空白空间？

我在使用翻转图像时看到，翻转版本可以在脚本中预加载 - 这是否是寻求此类解决方案时采用的最佳方法？

非常感谢任何帮助或建议 - 如果需要，很乐意显示代码 - 只是考虑到我的脚本中的数量，我认为这不会太有帮助！

谢谢京东

【问题讨论】：

这个问题有点含糊。我试图提供一些想法......但如果您想要更准确的建议，请尝试在您的问题中包含一些相关的代码片段
这可能不是 100% 相关的，但您可以考虑使用 CSS 精灵来加快分配可能在您的背景到达之前加载的小图像。看css-tricks.com/158-css-sprites
您能否提供一个示例页面，以便我们看到它的实际效果？

【解决方案1】：

我认为您的问题是加载图像的顺序。

如果您的背景图片是在所有其他元素之后加载的，请确保您的背景图片尽快加载。如果您的背景图片是 div 并带有 CSS 属性 background-image:url(myimage.png)，请将 CSS 文件包含在 head 标记中。

另外，您可以将背景图片保存为 png interlaced。（在 Photoshop 中：保存为网络和设备 > png24 > 勾选交错）。这样一来，图像会很快出现质量不佳的情况，并且会随着数据传输到浏览器而改善。

如果你想用 jQuery 控制图片加载，看这个问题：Preloading images with jQuery。但我怀疑这对你有用，因为你的问题是加载元素的顺序。

【讨论】：

【解决方案2】：

你试过用 JS 预加载图片吗？

类似这样的：

<script type="text/javascript">
    bg = new Image();
    bg.src="background.png";
</script>

【讨论】：

【解决方案3】：

分离http请求。

因此，您的页面仍然是一个带有背景图像的页面，并且只有很少的元素。

用javascript发出加载页面内容的ajax请求，并将这个ajax函数挂钩到$(document).ready()函数（如果你使用jquery，否则你可以使用window.load函数），所以内容页面将在页面加载后立即加载。

【讨论】：

【解决方案4】：

您还可以考虑使用 HTML5 指定的客户端缓存文件。
这并不能完全解决，因为用户第一次进入您的网站时，他必须等待图片加载完毕，但可以在下次相同用户再次访问时显着提升性能。
查看here了解更多信息。

【讨论】：

【解决方案5】：

你没有指定你是否使用了 jquery..

如果 jquery 调用 Image.load 函数。在回调中使用所有 js ，以便在加载该图像后调用 js ..

【讨论】：

【解决方案6】：

如果您想在不使用任何 JS 的情况下执行此操作，您可以将 div 或 img 标签作为页面正文下方的第一项，然后将该 img 标签样式设置为 display:none。它将首先加载图像，因此当您稍后尝试使用它时，它应该已加载并准备好显示。

【讨论】：