2

我正在开发一个基于html5 样板的实验性 jquery 移动应用程序作为 html 等的基础。

到目前为止，我所做的基本上是：

  1. 下载并解压 html5 样板，并在浏览器中查看。确保脚本/样式正确加载。好准备出发。
  2. 添加 jquery mobile（cdn 托管完整版 1.0 [今天发布？马上！]）
  3. 添加$(document).ready(function () { console.log('ready'); });
  4. 重新加载。'ready' 输出两次.. 稍微延迟后的第二次..
  5. wtf bbq 和 chrome 检查器中的此类检查情况..注意所有 javascript 文件似乎都加载了两次。
  6. 从头开始，在浏览器中提取 h5bp 加载，特别注意脚本加载一次。添加文档就绪处理程序，观察“就绪”的一个输出。
  7. 添加 jquery mobile 观察脚本加载一次。
  8. 将所有脚本移动到标签中。脚本加载一次。

有人知道发生了什么吗？重现这个应该很容易，只需提取 h5bp 并将 jquery mobile 添加到底部的脚本部分，突然脚本都加载了两次。将所有这些脚本移动到modernizr 下方（或之前）的head 标记中，这将不再发生。

谢谢

4

5 回答 5

3

Modernizr 使用 YepNope 加载脚本。如果您在这里查看问题：https ://github.com/SlexAxton/yepnope.js/issues/10

您会看到脚本被有意加载了两次：

Yepnope 确实会请求您放入其中的每个文件两次。它第一次将自己作为某种不可执行实体（对象元素、img 元素或具有假类型属性的脚本元素，具体取决于您的浏览器）加载到您的缓存中。第二次注入时，我们将它作为可执行脚本注入，这次它被缓存了。因此，执行回调函数并重新注入额外的脚本标记实际上只需要毫秒或更短的时间（以及访问缓存需要多长时间）。

在http://yepnopejs.com主页上也提到了这一点。去那里并向下滚动到I'm seeing two requests in my dev tools, why is it loading everything twice?

于 2011-11-21T19:16:01.447 回答
2

将您的<script>document.ready()</script>放入<head></head>将解决此问题。

于 2012-10-20T15:32:52.217 回答
1

你在使用 $(document).ready() 吗？

遇到同样的问题并且感到沮丧无止境，注意到如果我将所有 JS 移动到文档的头部，它工作正常。当我将所有内容切换为使用 pageinit 时，它开始在它所属的页面底部与 JS 一起正常工作。

例子：

<div id="mainPage" data-role="page">
    <script type="text/javascript">
        $("#project_map_page").live('pageinit', function() {
        // INSERT JS HERE
        });
    </script>
</div>

更多详细信息，请访问：http: //jquerymobile.com/demos/1.0/docs/api/events.html

于 2012-01-24T20:21:01.703 回答
0

确保你的根 div 是这样的......

<body>
<div data-role="page">
 <!-- Content -->
</div>
</body>
于 2012-05-10T14:39:43.893 回答
0

I tried adding jQuery and jQuery Mobile on a basic html page, it seems to happen like this as well. So don't think it's h5bp related. Could you try strip out the h5bp stuff and load again?

于 2011-11-21T19:25:50.887 回答