2

私は、html5ボイラープレートをhtmlなどのベースとして使用する実験的なjqueryモバイルベースのアプリに取り組んでいます。

基本的に、これまでに行ったことは次のとおりです。

  1. html5 ボイラープレートをダウンロードして抽出し、ブラウザーで表示します。スクリプト/スタイルが正しく読み込まれていることを確認してください。準備万端です。
  2. jquery モバイルを追加 (cdn ホステッド フル バージョン 1.0 [今日リリース? すぐに!])
  3. 追加$(document).ready(function () { console.log('ready'); });
  4. リロードします。'ready' が 2 回出力されます.2 回目は少し遅れて出力されます..
  5. wtf bbq など、chrome インスペクターで状況を検査すると、すべての JavaScript ファイルが 2 回読み込まれているように見えます。
  6. 最初から再起動し、ブラウザーで h5bp の読み込みを抽出します。特に、スクリプトが 1 回読み込まれることに注意してください。ドキュメント準備完了ハンドラーを追加し、「準備完了」の 1 つの出力を観察します。
  7. jquery モバイル監視スクリプトの読み込みを 1 回追加します。
  8. すべてのスクリプトをタグに移動します。スクリプトは 1 回読み込まれます。

何が起こっているのか誰にも分かりますか？これを再現するのは非常に簡単です。h5bp を抽出し、下部のスクリプト セクションに jquery mobile を追加するだけで、突然スクリプトがすべて 2 回読み込まれます。これらのスクリプトをすべて modernizr の下 (または前) の head タグに移動すると、この問題は発生しなくなります。

ありがとう

4

5 に答える 5

3

Modernizr は、YepNope を使用してスクリプトをロードします。ここで問題を確認すると: https://github.com/SlexAxton/yepnope.js/issues/10

スクリプトが意図的に 2 回読み込まれていることがわかります。

Yepnope は、入力したすべてのファイルを 2 回要求します。ある種の非実行可能エンティティ (ブラウザに応じて、object 要素、img 要素、または偽の type 属性を持つ script 要素) としてキャッシュに初めて読み込まれます。2 回目に挿入すると、実行可能なスクリプトとして挿入され、今回はキャッシュされます。したがって、コールバック関数を実行して余分なスクリプト タグを再挿入するのにかかる時間はミリ秒以下です (ただし、キャッシュへのアクセスには時間がかかります)。

これについては、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

基本的なhtmlページにjQueryとjQuery Mobileを追加してみましたが、こんな感じにもなりそうです。したがって、h5bp に関連しているとは思わないでください。h5bp のものを取り除いて、もう一度ロードしていただけますか?

于 2011-11-21T19:25:50.887 に答える