我有一个主页,其中包含大量的PHP代码来填充div(包括通过验证的简报注册,来自mysql数据库的内容和各种静态图像)。整个页面建立在背景交叉淡入淡出javascript之上。
这一切都很好看,看起来很好.....但是 - 当加载页面时,最后出现的“div”是背景图像 - 有效地创建一个大的“白色空间”,直到所有的div都加载了渲染背景图像。
是否有一种方法可以在其他任何内容之前加载第一个背景图像,以便在导航到网站时用户不会留下这个空白区域?
我已经看过使用翻转图像,可以在脚本中预加载翻转版本 - 这是在寻求这样的解决方案时采用的最佳方法吗?
非常感谢任何帮助或建议 - 如果需要,很乐意显示代码 - 只是不认为考虑到我脚本中的数量,它会太有用!!
由于 JD
答案 0 :(得分:3)
我认为您的问题是图片的加载顺序。
如果在所有其他元素之后加载了背景图像,请确保尽快加载背景图像。如果您的背景图片是带有CSS属性background-image:url(myimage.png)的div
,请在头标记中包含CSS文件。
此外,您可以将背景图像保存为png interlaced。 (在Photoshop中:为网络和设备保存> png24>勾选隔行扫描)。通过这种方式,图像将很快出现质量差,并且会随着数据传输到您的浏览器而得到改善。
如果要使用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。它将首先加载图像,因此当您稍后尝试使用它时,它应该被加载并准备好显示。