我有一个主页，其中包含大量的PHP代码来填充div（包括通过验证的简报注册，来自mysql数据库的内容和各种静态图像）。整个页面建立在背景交叉淡入淡出javascript之上。
这一切都很好看，看起来很好.....但是 - 当加载页面时，最后出现的“div”是背景图像 - 有效地创建一个大的“白色空间”，直到所有的div都加载了渲染背景图像。
是否有一种方法可以在其他任何内容之前加载第一个背景图像，以便在导航到网站时用户不会留下这个空白区域？
我已经看过使用翻转图像，可以在脚本中预加载翻转版本 - 这是在寻求这样的解决方案时采用的最佳方法吗？
非常感谢任何帮助或建议 - 如果需要，很乐意显示代码 - 只是不认为考虑到我脚本中的数量，它会太有用!!
由于 JD
答案 0 :(得分：3)
我认为您的问题是图片的加载顺序。
如果在所有其他元素之后加载了背景图像，请确保尽快加载背景图像。如果您的背景图片是带有CSS属性background-image：url（myimage.png）的div，请在头标记中包含CSS文件。
此外，您可以将背景图像保存为png interlaced。 （在Photoshop中：为网络和设备保存＆gt; png24＆gt;勾选隔行扫描）。通过这种方式，图像将很快出现质量差，并且会随着数据传输到您的浏览器而得到改善。
如果要使用jQuery控制图像加载，请查看以下问题：Preloading images with jQuery。但我怀疑这对你有用，因为你的问题是元素的加载顺序。
答案 1 :(得分：1)
您是否尝试使用JS预加载图像？
这样的事情：
<script type="text/javascript">
bg = new Image();
bg.src="background.png";
</script>
答案 2 :(得分：1)
分开http请求。
因此，您的页面仍然是包含背景图片的页面，并且只包含少量元素。
用javascript make ajax请求加载页面的内容，并将这个ajax函数挂钩到$（document）.ready（）函数（如果使用jquery，否则可以使用window.load函数），所以内容页面将在页面加载后立即加载。
答案 3 :(得分：0)
您还可以考虑使用HTML5指定的客户端缓存文件
这并不能完全解决，因为当用户第一次进入您的网站时，他必须等待加载图像，但是下次相同的用户将返回时可以显着提升性能。
查看here了解更多信息。
答案 4 :(得分：0)
你没有指定你使用过的jquery ..
如果 jquery 调用Image.load函数。在回调中使用所有js，以便js在加载该图像后调用..
答案 5 :(得分：0)
如果您想在不使用任何JS的情况下执行此操作，可以在页面中包含div或img标记作为主体下方的第一个项目，然后将img标记样式设置为display：none。它将首先加载图像，因此当您稍后尝试使用它时，它应该被加载并准备好显示。