Vandaag ben ik tegen een probleem aangelopen dat ik niet (helemaal) heb kunnen oplossen. Ik wil graag onderstaande code gebruiken om asynchroon JQuery in te laden (met behulp van yepnope).

<script src="/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="/scripts/yepnope.1.5.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
	var docready = [], $ = function () { return { ready: function (fn) { docready.push(fn); } }; };
	yepnope({
		load: '//ajax.googleapis<em><strong>OFFLINE</strong></em>.com/ajax/libs/jquery/1.8.2/jquery.min.js',
		complete: function () {
			if (!window.jQuery) {
				yepnope({ load: '/scripts/jquery-1.8.2.min.js', complete: initJQuery });
			} else {
				initJQuery();
			}
		}
	});

	function initJQuery() {
		$ = window.jQuery;
		for (var index in docready) $(document).ready(docready[index]);
	}
</script>

De code werkt bijna helemaal.

De code werkt bijna perfect. De JQuery bibliotheek wordt geladen vanuit de Google CDN, zoals gevraagd, en wanneer die niet beschikbaar is, valt het script terug naar het laden van het lokale script. Terwijl de jQuery bibliotheek is nog niet geladen, zet ik alle $(document).ready() calls in de wacht om ze alsnog uit te voeren wanneer jQuery volledig is geladen. Dit werkt! Maar ik ontdekte dat JQuery plugins niet werken met deze code, omdat ze het jQuery of $ object nodig hebben.

Ik weet dat ik de initJQuery functie zou moeten gebruiken voor het laden van JQuery gebaseerde plugins omdat ik gebruik wil maken van asynchroon laden. Helaas kan dit niet, omdat sommige plugins ingevoegd worden door bij ASP.NET partial views of m.b.v. Rejuicer. Op dit moment blijf ik werken met de synchroon geladen jQuery plugin (zo laat mogelijk) en vang ik nog steeds de $(document).ready() calls op voor latere (gegarandeerde) uitvoering. Ik ben wel benieuwd naar jullie oplossingen .

PS. Ow, op dit moment, het stukje code dat ik op dit moment gebruik is:

// in head:
<script type="text/javascript">var docready = [], $ = function () { return { ready: function(fn) { docready.push(fn); } }; };</script>

// just before </body> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript">
    // fire all preliminary $(document).ready(fn) calls immediately after jquery is loaded.
    $ = jQuery;
    for (n in docready) $(document).ready(docready[n]);
</script>