通过Modernizer加载jQuery时未定义$.

Question

我用modernizr加载jQuery,'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>

Answer 1

yepnope/modernizr.load中的脚本是异步加载的.这意味着,按照设计,它们不会直接在其包含的空间内执行.这样可以通过不阻止页面进一步呈现来提高页面性能.

这些callback和complete选项可供您在脚本准备就绪时收到警报.确保jQuery存在的最快途径是将页面上的内容包装得更低:

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

然后在complete函数中调用appInit()函数.您的页面加载时间将会感谢您.

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

如果你的dom已经准备就绪,那么它将会立即运行,或者如果还没有,它会等待一段时间才会发生.

希望能搞清楚.