在主页上预加载背景图像

Question

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

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

是否有一种方法可以在其他任何内容之前加载第一个背景图像，以便用户在导航到网站时不会留下空白区域？

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

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

谢谢 京东

Answer 1

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

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

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

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

Answer 2

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

像这样的事情：

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

Answer 3

分离http请求。

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

使用javascript发出ajax请求加载页面内容，并将该ajax函数挂钩到$(document).ready()函数（如果您使用jquery，否则可以使用window.load函数），因此页面内容将是页面加载后立即加载。

Answer 4

您还可以考虑使用 HTML5 指定的客户端缓存文件。
这并不能完全解决问题，因为用户第一次进入您的网站时，他必须等待图像加载，但可以为您下次同一用户回来时提供显着的性能提升。
请参阅此处了解更多信息。

Answer 5

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

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

Answer 6

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