使用yep / nope与document.ready

时间:2013-03-01 04:29:53

标签: javascript jquery document-ready yepnope

我正在使用yepnope.js,但在加载函数

时遇到了一些问题

在头部我包括yep nope并打电话给相关的js文件

<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>

<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>

<script type="text/javascript">
yepnope({
  test: Modernizr.mq('only all and (max-width: 700px)'),
  yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
  nope:['/templates/client/jquery/qff/plugin.website.js']
});    
</script>

然后在页面底部

<script type="text/javascript">
jQuery(document).ready(function() 
{
    jQuery("#mainContent").setupQantas({
        startSlide: 1, 
        googleAnalytics:1,
        googleCode:""
    });
});
</script>

所以我在主屏幕上看这个。所以支持调用plugin.mobile.js

在plugin.mobile.js文件中

(function( $ ){

  $.fn.setupQantas = function( options ) {  

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
        startSlide: 1, 
        googleAnalytics:0, // 1 sends to google
        googleCode: ""
    }, options);

    var methods = {};

    return this.each(function() {        

        if (settings.startSlide === 1) {
            alert("slide = 1");     
        } else {
            alert("slide > 1");
        }
    });
  };
})( jQuery );// JavaScript Document 

而不是提供警报幻灯片1,它有错误

jQuery("#mainContent").setupQantas is not a function

如果我不使用yepnope并且只是在脚本标签中它可以工作。 yepnope在js文件中加载的时间似乎有延迟,而且在doc.ready

之前似乎没有。

有办法解决这个问题吗?

感谢

2 个答案:

答案 0 :(得分:3)

是的,有延迟。这就是异步脚本加载器背后的重点。

在yepnope加载脚本后,您应该使用回调。查看completecallback选项。

答案 1 :(得分:0)

这是代码

<script type="text/javascript">

yepnope({
  test: Modernizr.mq('only all and (max-width: 700px)'),
  yep: ['/templates/client/jquery/qff/mobile.js'],
  nope:['/templates/client/jquery/qff/website.js'],
  complete: function () {
    jQuery("#mainContent").setupQantas({
        startSlide: 1, 
        googleAnalytics:1,
        googleCode:""
    });
  }
});


</script>