Question

我正在使用html5 boilerplate作为html等基础的实验性jquery基于移动设备的应用。

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

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

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

由于

Answer 1

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

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

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

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

Answer 2

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

Answer 3

您使用的是$（文件）.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

Answer 4

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

Answer 5

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

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

html5样板+ jquery mobile =脚本加载两次

5 个答案: