当前位置： 文江博客话题详情

html5boiler 板 + jquery mobile = 脚本加载两次

发布于 2024-12-17 07:11:42 字数 728 浏览 1 评论 0原文

我正在开发一个基于 jquery 的实验性移动应用程序，使用 html5 样板 作为 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 标签中，这种情况将不再发生。

谢谢

原文

I am working on an experimental jquery mobile based app using html5 boilerplate as a base for html and such.

Basically all I have done thus far is:

  1. Download and extract html5 boilerplate, and view it in the browser. Make sure scripts/styles are loading properly. Good ready to go.
  2. Add jquery mobile (cdn hosted full version 1.0 [released today? right on!])
  3. Add $(document).ready(function () { console.log('ready'); });
  4. Reload. 'ready' is output twice.. the second one after a slight delay..
  5. wtf bbq and such inspect situation in chrome inspector.. notice all javascript files seem to be loading twice.
  6. Restart from scratch, extract h5bp load in browser, note in particular that scripts load once. Add document ready handler, observe one output of 'ready'.
  7. Add jquery mobile observe scripts loading once.
  8. Move all scripts into the tag. Scripts load once.

Anyone have any idea what is going on? It should be pretty easy to reproduce this, just extract h5bp and add jquery mobile to the scripts section at the bottom and suddenly the scripts all are loading twice. Move all those scripts into the head tag beneath (or before) modernizr and this no longer occurs.

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

灯下孤影 2024-12-24 07:11:42

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

你会看到脚本被故意加载两次：

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

http://yepnopejs.com 主页上也提到了这一点。只需转到那里并向下滚动到我在我的开发工具中看到两个请求，为什么它会加载所有内容两次？

Modernizr uses YepNope to load scripts. If you take a look at the issue here: https://github.com/SlexAxton/yepnope.js/issues/10

you'll see that scripts are intentionally loaded twice:

Yepnope does request every file you put into it twice. The first time
it loads itself into your cache as some sort of non-executable entity
(an object element, or an img element, or a script element with a fake
type attribute, depending on your browser). The second time it's
injected, we inject it as an executable script, and this time it's
cached. So there is really only the millisecond or less that it takes
to execute the callback function and reinject a script tag extra (and
however long it takes to access the cache).

There's also mention of this on the http://yepnopejs.com home page. Just go there and scroll down to I'm seeing two requests in my dev tools, why is it loading everything twice?

回复 原文
囚我心虐我身 2024-12-24 07:11:42

将 放入 将解决此问题。

Putting your <script>document.ready()</script> in <head></head> will fix this problem.

回复 原文
中性美 2024-12-24 07:11:42

你在使用 $(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/文档/api/events.html

Are you using $(document).ready()??

Ran into this same issue and was frustrated to no end, noticed that if I moved all the JS to the head of the document it worked fine. When I switched everything to use pageinit started working properly with JS at bottom of page where it belongs.

example:

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

further details available at: http://jquerymobile.com/demos/1.0/docs/api/events.html

回复 原文
梦旅人picnic 2024-12-24 07:11:42

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

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?

回复 原文
不交电费瞎发啥光 2024-12-24 07:11:42

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

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

Make sure your root div is like this...

<body>
<div data-role="page">
 <!-- Content -->
</div>
</body>
回复 原文
~没有更多了~

关于作者

烙印

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

燃烧我的卡路李先生

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

∞梦里开花

文章 0 评论 0

qq_IklFPL

文章 0 评论 0

迷途知返

文章 0 评论 0

深海不蓝

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文