3

我目前正在从事一个学生项目，但我的代码遇到了问题。我们构建了一个电子文档，它混合了有关夜间工作人员的视频、图像、声音和文本数据。它由 HTML、Javascript 和一点 PHP 组成，用于访问数据库。

最近我们发现当你到达网站时页面一直在无限加载......它破坏了我们的一些JS代码，我们不知道如何识别可能被破坏的资源......

什么可以使页面“永远”加载？我们应该使用什么样的工具（即 firebugg 或内置的 chrome 工具）来识别问题？

您可以在这里找到我们的开发版本：http: //mgprddev2012.dream-valenciennes.com

编辑：PHP 错误现在可以了，我忘了在开发平台上上传最新版本的代码。

非常感谢

4

3 回答 3

4

你没疯 - 这个页面确实需要很长时间才能加载。

如果您查看 Chrome 开发者工具中的网络选项卡，您会发现一开始有很多图像、音频文件和视频文件都在加载，并且大部分都无法立即看到。其中一些非常大。这可能是最好将这些资产中的大多数延迟加载到您需要显示它们的情况之一，或者至少在您立即加载所需的资产之后。

我建议检查一下YSlow，这是一个审计工具，它会给你一些关于如何让你的网页加载得更快并且看起来加载得更快的提示。该网站还提供了一些很好的提示和详尽的解释，说明为什么不同的策略是有效的。

此特定页面的一些提示：

  • 你的很多图片都是文字图片。考虑将这些渲染为实际的 html 文本。您仍然可以使用 CSS 修改每个字母的大小，并且您将获得 Chrome 能够为非法语用户翻译文本的额外好处。您应该能够使用 CSS 边框来获取文本周围的这些线条，或者尝试使用 SVG。

  • 您的背景图片为 2.2 MB。这是相当大的。尝试以较低的压缩设置保存它。

  • 您在单个 png 文件中有一堆图标。考虑将它们全部放在一个文件中并将它们显示为CSS Sprites。

  • 除了透明度之外，有几个 png 文件看起来可能是 jpg 文件。如果你有野心，你可以制作一个 jpg，左边的颜色通道，右边的 alpha 通道渲染为灰度，然后使用画布合成它们。

  • 您还有一些包含动画精灵的 png 文件。您可以将它们转换为视频并尝试与上述相同的画布技巧。如果你愿意使用 WebGL，我有一些你可以使用的代码。

于 2013-01-31T03:43:51.863 回答
3

停止加载对我来说很好。Firebug 通常会告诉您是否在后台加载了某些内容。查看控制台区域以查看页面加载时是否有任何事情停止。你是说它在当前状态下挂起，因为对我来说它完成得很好。

在控制台中，您还可以看到可能导致无法正常工作的 javascript 错误。

于 2013-01-17T20:28:41.573 回答
0

在 JavaScript 控制台中：

Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979

它说debout.pop02没有声明。你在哪里初始化它？

于 2013-01-17T20:29:47.373 回答