JSFiddle - React, Tailwind, and code Playground

by neohunter

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
...

JavaScript

// This have to be on <HEAD> preferibly inline
var delayed_jquery = [];
jQuery = function() {
	if(typeof arguments[0] == "function"){
  	jQuery(document).ready(arguments[0]);
  }else{
  	return {
      ready: function(fn) {
        console.log("registering function");
        delayed_jquery.push(fn);
      }
    }
  }  
};
$ = jQuery;
var waitForLoad = function() {
  if (typeof jQuery.fn != "undefined") {
    console.log("jquery loaded!!!");
    for(k in delayed_jquery){
      delayed_jquery[k]();
    }
  } else {
    console.log("jquery not loaded..");
    window.setTimeout(waitForLoad, 500);
  }
};
window.setTimeout(waitForLoad, 500);
// end



// now lets use jQuery (the fake version)
jQuery(document).ready(function(){
    alert('Jquery is now loaded!');
});

jQuery(function(){
    alert('Jqueyr is now loaded , this uses another call method');
})

// And lets load the real jquery after 3 seconds..
window.setTimeout(function(){
			console.log("now lets include the real jquery library...")
      var newscript = document.createElement('script');
           newscript.type = 'text/javascript';
           newscript.async = true;
           newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
        (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
}, 3000);