1

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

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

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

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

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

谢谢京东

4

6 回答 6

3

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

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

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

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

于 2011-11-02T00:00:04.597 回答
1

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

像这样的东西：

<script type="text/javascript">
    bg = new Image();
    bg.src="background.png";
</script>
于 2011-11-03T21:42:56.107 回答
1

分离 http 请求。

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

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

于 2011-11-04T04:30:30.157 回答
0

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

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

于 2011-11-04T13:03:42.293 回答
0

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

于 2011-11-04T13:13:41.520 回答
0

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

于 2011-11-04T12:56:50.193 回答