Need help organizing code for asyc loading + doc ready?

[clbuttic]

Hi,
at the moment I try to give my site a small speed boost by loading most of my scripts asynchronous. As I am using Modernizr anyway it’s a good thing I believe, but I am having serious problem getting everything in a logical order.
I already tried to write it down on paper multiple times, but also having problems with understanding how to use document ready together with Modernizr.load does not make things less complicated.

Here is what I got so far “theoretically”:
First, I load the Modernizr script in the head, followed by my script, lets call it myscript.js. In that file, I do all my async calls.
First load jQuery. While jQuery loads, I can start doing the Modernizr tests I need and if one of them fails, I load my polyfills.js (holds all poyfills). In the callback, I set them up and initialize them. Next, I start loading a script that enables me to print some latest tweets anywhere on that page. In the callback, I set everything up and initialize. I also have a script that I only need on one page when a specific div exists, so I test for this, set everything up and init. I also have one or two short simple one-liners, where do I put those?

In code, this is what it looks to far:

yepnope.errorTimeout = 1000;
Modernizr.load([
{
load: “http://code.jquery.com/jquery-1.9.1.min.js”,
callback: function () {
if ( !window.jQuery ) {
Modernizr.load( “/js/jquery-1.9.1.min.js” );
}
}
},
{
test: Modernizr.input.required || Modernizr.formvalidation || Modernizr.svg || Modernizr.inlinesvg,
nope: “/js/js-webshim/minified/polyfiller-plus-all.js”,
callback: function ( url, result, key ) {
if( result == false ) {
jQuery.webshims.setOptions({
waitReady: false,
basePath: “/js/js-webshim/minified/shims/”
});
jQuery.webshims.polyfill( “forms” );
}
}
},
{
load: “/js/twitter.js”,
callback: function () {
jQuery(document).ready(function($) {
$( function( $ ) {
$( “.tweet ” ).tweet({
count: 3,
username: “user”
});
});
});
}
},
{
test: $(“#element”).length,
yep: function () {
$(“#element”).bind(“click….
}
]);

As you probably figured out, this isn’t even working due to my document ready problem, which is very frustrating because I spent the second whole working on it. Of course I already did a Google search and found some fancy script where you can create your own namespace or something like that, but I simply don’t understand that.

So please help me, I would really appreciate that :-)

[Author]

Posts