Search code examples
javascriptjqueryyepnope

yepnope.js resource fallbacks not working


I used the code straight from the examples on yepnope's homepage:

  yepnope([{
    load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',
    complete: function() {
      console.log('made it');
      if(!window.jQuery) { yepnope('/js/jquery.1.5.2-min.js'); }
    }
  }]);

I've been working without internet today and I noticed that my local version of jQuery is not being loaded.

Since I'm not connected to the internet I would assume in the example above the Google CDN version would fail to load, the complete function would be called which would load my local copy. It looks like complete is not being called at all because I am not seeing 'made it' in the console.

Also, I checked and the path to my local copy is correct.


Solution

  • EDIT based on your comments and question update:

    You have to wait for it to time out. The complete function won't fire immediately. I just downloaded yepnope.js and ran their demo/index.html with the following code added just under their yepnope call that loads jQuery at the bottom of the page:

    yepnope({
    
      load     : "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js",
      callback : function() { console.log("callback"); },
      complete : function() { console.log("complete"); }
    
    });
    

    Obviously jQuery 1.6.2 will not load. About 10-15 seconds later in the console, both the "callback" and "complete" messages show up, so I know they are getting fired.

    Alernative:

    If you find that you are only needing this functionality for developing online/offline, you might try what Html5Boilerplate uses, which I have adpoted:

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; 
         fall back to local if necessary -->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" 
            type="text/javascript"></script>
    
    <script type="text/javascript">
        window.jQuery || document.write('<script src="js/jquery-1.5.2.js">\x3C/script>')
    </script>
    

    Here's what I personally use:

        </form>
    
        <!-- Javascript at the bottom for fast page loading -->
    
        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript"> window.jQuery || document.write('<script src="js/jquery-1.5.2.js">\x3C/script>')</script>
    
        <!-- Grab Google CDN's jQuery UI, with a protocol relative URL; fall back to local if necessary -->
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript"> $.ui || document.write('<script src="js/jquery-ui-1.8.4.custom.min.js">\x3C/script>')</script>
    
        <!-- Scripts concatenated and minified via ant build script-->
        <script src="js/plugins.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
        <!-- End scripts -->
    
    </body>
    </html>