Is it possible to preprocess the handlers before loading jQuery?

Question

The situation is when jQuery loads on the back page, but javascript, which relies on accessible jQuery, loads before jQuery is a fairly common script, especially if you practice the practice of approximating your scripts to </body> .

So basically I want to move from this:

 <script> someFunctionThatUsesLateJQuery(){ [code that relies on jQuery] } </script> ... <script src="jquery.js"></script> <script> $(function(){ someFunctionThatUsesLateJQuery(); }); </script> 

Something like that:

 <script> _$.ready(function(){ [code that relies on jQuery] }); </script> ... <script src="jquery.js"></script> 

Like tracking asynchronous statistics (á la Google Analytics), is there anything that allows you to record javascript function calls that will be executed after jQuery loads without receiving the $ is undefined error?

I mean this will happen without registering and unregistering timeouts / intervals.

Is there ever the possibility of adding some kind of pre-registration variable to jQuery that it recognizes and processes after loading it?

Use case:

It is worth noting that the specific use case that I have is a JS-drop widget in which I want some DOM manipulations to occur on the <script> placement, which therefore has a very real possibility appears before jQuery is loaded into case jQuery loading around </body> .

Then I don’t want to burden the user anymore, requiring them to register a specific function call at the correct code execution point (which will depend on their implementation) ... I want it to just work

Answer 1

You can try to use a common and popular solution when all function calls have moved to data attributes. Then, when jQuery loads, you throw all the DOM elements with these attributes and run these functions. That is, instead of calling the function, you add data-type='load' data-function='YourNamespace.yourFunctionName' and after the window.load event you select all the elements of $('[data-type="load"]') , iterate them and make function calls.

---

UPD: Guess the asynchronous function queue pattern might be useful for reading: What is the name of the Google Analytics async pattern and where is it used?

Answer 2

As suggested by rich.okelly here , you can try the following:

 (function() { var runMyCode = function($) { // jquery-dependent code here $("#foo").data('bar', true); }; var timer = function() { if (window.jQuery && window.jQuery.ui) { runMyCode(window.jQuery); } else { window.setTimeout(timer, 100); } }; timer(); })(); 

I also found a more complicated solution, but personally I prefer the above solution over this solution .

Update without timeout:

 <script> var runMyCode = function($) { // jquery-dependent code here $("#foo").data('bar', true); }; </script> ... <script src="jquery.js"></script> <script> $(function(){ runMyCode(window.jQuery); }); </script> 

Answer 3

If you add a jQuery script include, you can listen for the onload event.

 function loadJS(url, onloadCallback, elId){ //Inject script include into HEAD var scriptEl = document.createElement('script'); scriptEl.type = 'text/javascript'; scriptEl.src = url; if(elId)scriptEl.id = elId; document.getElementsByTagName('head')[0].appendChild(scriptEl); if(onloadCallback){ scriptEl.onload = scriptEl.onreadystatechange = function(){ if(!scriptEl.readyState || (scriptEl.readyState === 'complete' || scriptEl.readyState === 'loaded')){ onloadCallback(); scriptEl.onload = scriptEl.onreadystatechange = null; } } } } loadJS("http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){ console.log( window.$ ); }); 

Answer 4

I may not fully understand the use case, but RequireJS seems like this might be a good option for you:

https://github.com/requirejs/example-jquery-shim

 define(["jquery", "jquery.alpha", "jquery.beta"], function($) { //the jquery.alpha.js and jquery.beta.js plugins have been loaded. $(function() { $('body').alpha().beta(); }); });