3

我有一个使用 jQuery mobile 的移动网站，并且在移动设备上加载 CSS 时遇到问题。在我的带有 Jellybean 的 Nexus S 上，HTML 加载速度非常快，但 CSS 需要 3-4 秒，在此期间网站如下所示：

在此处输入图像描述

移动网站本身可以在http://axisdev.ekomobi.com找到

CSS 文件链接在顶部，但它似乎仍然最后加载。包含颜色和可见样式的称为client-damafro.min.css.

我做事的方式有什么明显的问题吗？如何解决我的加载问题？

4

4 回答 4

8

我知道这听起来很违反直觉，但是您可以将脚本放在 css 之后吗？

这将首先加载所有“东西”，然后是 html。它将避免在应用js之前快速闪烁......

我通过将完整页面保存到我的计算机并对其进行更改来在本地尝试它，并且似乎可以工作......

干杯

罗宾

Ps：我最后忽略了整个加载脚本。我知道...

于 2012-10-17T04:48:06.430 回答
2

首先我会缩小你所有的 CSS

我也会缩小你的 JavaScript

我建议查看 Google Chrome 开发者工具

最后一件事是我将移动 jQuery 和 jQuery Mobile javascript 文件以在 css 文件之后立即加载。

<link rel="stylesheet" href="/css/responsive.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

由于 jQM 控制应用程序的外观和感觉，因此首先加载这些可能会有所帮助，因为您首先加载 HTML 然后应用 CSS

于 2012-10-16T02:09:12.913 回答
0

对我来说，在将 css 放入等方面似乎你做的事情是正确的。我的建议是你得到 yslow ( https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh ) 并尝试优化根据其建议。或者，您可以将所有 css 合并到一个文件中以进行生产，并使用此工具对其进行压缩http://www.cleancss.com/

另外请参阅这篇文章以获取更多指针强制浏览器在显示页面之前加载 CSS

于 2012-10-09T16:52:11.017 回答
0

我会尝试将您所有的 javascript（请求）放在代码的底部，就在结束</body>标记之前，并确保您的脚本在 DOM 准备好（加载）时启动。

另一个想法：尝试在您自己的服务器上托管 jquery-mobile 库。

于 2012-10-16T15:49:03.607 回答