预加载主页上的背景图像

我有一个主页，其中包含大量的PHP代码来填充divs（包括通过验证，来自mysql数据库和各种静态图像的内容进行通讯注册）。整个页面建立在背景淡入淡出的JavaScript之上。预加载主页上的背景图像

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

是否有让浏览该网站时，用户是不是跟这个空白留下任何事情之前先装入背景图像的方法？

我已经在使用翻转图像中看到，侧翻的版本可以在脚本中预装 - 这会是寻求这样的解决方案时采用的最佳方法是什么？

任何帮助或建议非常赞赏 - 高兴，如果需要显示的代码 - 只是没想到它会给出的量存在于我的脚本是太大的帮助！

感谢 JD

2011-10-24 JD2011

这个问题有点含糊。我试图提供一些想法...但是如果你想要更精确的建议，试着在你的问题中包含一些相关的代码snipets –

这可能不是100％相关的，但你可以考虑利用CSS精灵来加速分配小在背景到达之前可能会加载的图像。看看http://css-tricks.com/158-css-sprites/ –

你能否提供一个样本页面，以便我们看到它的行动？ – andreapier

我觉得你的问题是其中的图像加载顺序。

如果您的背景图像在所有其他元素之后加载，请确保您的背景图像尽快加载。如果你的背景图像是div与CSS属性背景图像：网址（myimage.png），包括头标记的CSS文件。

此外，您可以保存您的背景图片为png interlaced。（在Photoshop中：保存为网页和设备> png24>隔行扫描）。这样，图像将会以较差的质量快速显现，并且会随着数据传输到您的浏览器而得到改善。

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

2011-11-02 00:00:04

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

事情是这样的：

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

2011-11-03 21:42:56 scumah

独立的HTTP请求。

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

使用javascript让ajax请求加载页面内容，并将此ajax函数挂接到$（document）.ready（）函数（如果使用jquery，否则可以使用window.load函数），所以内容的页面将在页面加载后立即加载。

2011-11-04 04:30:30

您也可以考虑使用HTML5指定的客户端缓存文件。
这并不能完全解决的用户第一次进入你的网站，他必须等待加载图像，但可以给你今后一段时期内同一用户会回来显著的性能提升。
看here获取更多信息。

2011-11-04 12:56:50 andreapier

üdidnt指定ü使用jQuery的或不..

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

2011-11-04 13:03:42 sandeep

如果您希望在不使用任何JS的情况下执行此操作，则可以在页面正文的下面包含div或img标记然后将该img标签样式设置为显示：无。它会首先加载图像，所以当您稍后尝试使用它时，它应该被加载并准备显示。

2011-11-04 13:13:41

回答