<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Comments on snippet: 'Load external scripts FIRST for injected DOM HTML content'</title>
<link>http://snipplr.com</link>
<description>Snipplr comments feed'</description>
<language>en-us</language>
<pubDate>Sun, 26 May 2013 03:19:50 GMT</pubDate>
<item>
<title>harikaram said on 2/26/11</title>
<link>http://snipplr.com/view/43449/load-external-scripts-first-for-injected-dom-html-content/</link>
<description><![CDATA[ My latest version of this is considerably more complex...have a look for inspiration:

_loadContentScripts: function ( html, callback )
	{
		// Grab the external script tags and strip from the html
		var workingHtml = $(html);
		var scripts = workingHtml.filter( 'script[src$=".js"]' ).clone();
		var v = this;
		
		// If no scripts then just callback
		if ( scripts.length == 0 ){
			callback( html );
			return this;
		}
		
		// Otherwise strip the scripts from the HTML
		html = workingHtml.not( 'script[src$=".js"]' );
		
		// Gather the script names for later as .data doesnt seem to work well
		var scriptLoadMap = new Array();
		scripts.each( function ( i, ele ) {
			scriptLoadMap[ $(ele).attr( 'src' ) ] = false;
		});
		
		// Add them seperately and set the callback
		scripts.appendTo( 'body' );
		
		// Handler to check whether all scripts have been loaded
		var done = false;
		var handler = function ( e ){	
			var loadedSrc = $( e.currentTarget ).attr( 'src' );
			
			if ( typeof( scriptLoadMap[ loadedSrc ] ) == 'undefined' )
				return;
					
			// Set this one to true
			scriptLoadMap[ loadedSrc ] = true;
			
			// Check whether they've all loaded
			var allLoaded = true;
			scripts.each( function ( i, ele ) {
				src = $(ele).attr( 'src' );
				allLoaded = allLoaded &amp;&amp; scriptLoadMap[ src ];
			})
			
			// Call the CB if all are loaded
			if ( allLoaded &amp;&amp; !done ){
				callback( html );
				done = true;	//only call once
			}
		};
		
		// IE compat event checking for a script's load
		// This grabs all the pages scripts but thanks to our handler thats ok
		$('script[src$=".js"]').load( handler ).each( function(){
				var thisSrc = $( this ).attr( 'src' );
				 
				// Don't bother unless its in out list
				if ( typeof( scriptLoadMap[ thisSrc ] ) == 'undefined' )
					return;
			
				// In case already loaded (like by cache), trigger manually
				if ( this.complete )	
					$( this ).trigger( 'load' );
					
				// Special case for IE
				else if ( $.browser.msie ){
					this.onreadystatechange = function () {
						if ( this.readyState == "loaded" || this.readyState == 'complete' )	// ie8 = loaded.  'complete' just in case...
							$( this ).load(); 
					};
				}
				
				// HKS Hack
				// Set a timeout period before we force the load, in case browser is acting up (eg. IE)
				window.setTimeout( 
					$.proxy( function ()
					{
						if ( done ) return;		// see above
						
						// Tell GA
						v._tracker.trackEvent( 'Errors', 'Script Timeout', thisSrc );
						
						if ( EcourseOSConfig.DEBUG )
							console.log( 'Script Load has timed out (' + EcourseOSConfig.SCRIPT_LOAD_TIMEOUT+'ms) for file "' + $(this).attr('src') + '".  Triggering load manually...' );
						
						if ( $.browser.msie )
							this.onreadystatechange = null;
						
						$( this ).load();		// triggers event
					}, this ), 
					EcourseOSConfig.SCRIPT_LOAD_TIMEOUT
				);
		});
		
		return this;
	}, ]]></description>
<pubDate>Sat, 26 Feb 2011 07:27:57 GMT</pubDate>
<guid>http://snipplr.com/view/43449/load-external-scripts-first-for-injected-dom-html-content/</guid>
</item>
</channel>
</rss>