2012-01-11 14 views
2

jQueryをmodernizrでロードし、 'complete'関数のすべてのコードが正常に実行されます。しかし、私がModerniz.loadの外からいくつかのjsを呼び出そうとすると、 '$は定義されていません'とFirebugが言います。

<script> 
Modernizr.load([ 
{ 
    load: [ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'], 
    complete: function() { 
     if (!window.jQuery) { 
      Modernizr.load('/weblounge-sites/www/js/jquery-1.7.min.js', '/weblounge-sites/www/js/jqueryui-1.8.min.js'); 
     } 
    } 
}, 
{ 
    load: [ 'some additional scripts' ], 
    complete: function() { 
     $ = jQuery; 
     $(document).ready(function(){ 
      some js 
      }); 

     }); 
    } 
}, 
{ 
    test: Modernizr.boxshadow, 
    nope: 'polyfills/PIE.js', 
} 
]); 
</script> 

しかし、ビューラインからの呼び出しが後で失敗します:

この作品

<script> 
$(document).ready(function(){ 
    $('#hauptsponsoren').cycle({ 
     fx: 'fade', 
     speed: 4000, 
     timeout: 10000 
    });     
}); 
</script> 
+0

私はちょうどyepnope/Modernizrを勉強しています。私がタイミングを見れば、私は大丈夫です。私がしたことは、あなたの 'complete'にinit()メソッドを追加することでした。そして、あなたの$ document.ready行はこのinit()関数の中にあります。これは私のために働いた... – user1889992

答えて

0

あなたmodernizrでのjQueryをロードし、このようにそれを割り当てているため、問題が来る:$ = jQueryの、ただし、それはcomplete: function() {のコンテキスト内でのみ割り当てられます。

var $; 

あなたはその時点でどこにでも使用できるようにグローバルとして$の範囲を設定します:それはあなたのModernizer.loadセットする前に、そのコンテキストの外で動作させるために 。

あなたがグローバルに$の範囲を設定しない場合は、jQueryのを使用しても、このように動作します:yepnope/modernizr.loadで

jQuery(document).ready(function() 
+0

jQuery(document).ready(function()は機能しないfirebug: 'jQueryが定義されていません' – Simon

+0

window.jQueryを試してみると何が得られるか –

+0

window.jQueryは定義されていません – Simon

5

スクリプトを非同期にロードされます。それは、設計上、彼らがその包含の真下の空間で実行されないことを意味する。これにより、ページがさらにレンダリングされないようにすることで、ページのパフォーマンスが向上します。

callbackcompleteのオプションは、スクリプトの準備ができたらいつでも警告するためのものです。 jQueryのが存在することを確認するまでの最速ルート、ちょうどあなたのページに下のものをラップすることです:

complete機能で
<script> 
function appInit() { 
    $(document).ready(function(){ 
    $('#hauptsponsoren').cycle({ 
     fx: 'fade', 
     speed: 4000, 
     timeout: 10000 
    });     
    }); 
} 
</script> 

そして、appInit()関数を呼び出します。あなたのページの読み込み時間はあなたに感謝します。

complete: function() { ...; appInit(); }

あなたのDOMは、その時点で準備ができているならば、それはすぐに実行されます、またはそれはまだない場合、それは同様に発生する、そのために少し長く待ちます。

希望をクリアします。