html5boiler plate + jquery mobile = 脚本加载两次答案

【问题标题】：html5boiler plate + jquery mobile = scripts loading twicehtml5boiler plate + jquery mobile = 脚本加载两次
【发布时间】：2011-11-18 21:13:45
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

不知道，但我会开始删除代码。这可能是 JQM、JQ 和 Modernizr 不同意的一些假体技巧。只是越来越多地减少你的测试用例，直到你发现冲突
有趣，我会研究一下假体。

标签： jquery mobile html5boilerplate

【解决方案1】：

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

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

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

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

【讨论】：

我认为你需要仔细阅读我的帖子。我知道 yepnope 的行为，问题是添加 jquerymobile 后，事件处理程序等实际上执行了两次。根据 WITH jqM 检查器的 Network 窗格，脚本也会加载两次，但不是没有它。
很公平。但是，如果您阅读我提到的 yepnope 页面上的段落，它会说如果您看到双倍的加载时间，那么您需要确保发送正确的缓存标头。如果 yepnope 无法缓存第一次加载，那么您将获得双重执行。
只是重新阅读旧的 cmets - 不打算以听起来我所做的方式脱落。迟到的感谢您提供的信息。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你在使用 $(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

【讨论】：

这对我没有帮助:(
可能已经改变——这个答案已经超过 2 年了 =)
哦，太糟糕了，我尝试了几乎所有的可能性仍然无法弄清楚

【解决方案4】：

我尝试在一个基本的 html 页面上添加 jQuery 和 jQuery Mobile，它似乎也是这样发生的。所以不要认为它与h5bp有关。您可以尝试去掉 h5bp 的内容并重新加载吗？

【讨论】：

有趣，我将尝试只将 jquery 和 jqM 添加到一个简单的 html5 页面中。

【解决方案5】：

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

<body>
<div data-role="page">
 <!-- Content -->
</div>
</body>

【讨论】：