Question

我使用modernizr加载jQuery，并且＆＃39;完成＆＃39; -function中的所有代码运行正常！但是，如果我试着从外面打电话给某些js＆＃39; Moderniz.load＆＃39;萤火虫说：＆＃39; $未定义＆＃39;。

这有效：

<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已准备就绪，它将立即运行，或者如果它尚未运行，它将等待一段时间以使其发生。

希望能够解决它。

Answer 2

问题来了，因为你的modernizr正在加载jQuery并像这样分配它：$ = jQuery，但是，它只在complete: function() {上下文中分配。要在Modernizer.load集合之前使其在该上下文之外工作：

var $;

这会将$的范围设置为全局，因此您可以在此处的任何位置使用它。

如果你没有将$的范围设置为全局，那么使用jQuery仍然可以这样工作：

jQuery(document).ready(function()

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

2 个答案: