Check if all jquery files are uploaded, then run the associated div

Question

How to check all j Query files are fully loaded or not.

I want to show my div only when all jQuery files associated with this div are loaded.

document readiness and window loading function do not work.

How to write a conditional function where u can check if all jQuery is loaded and then show the div .... I call all my jQuery files in an external js file (basically I'm trying to create a plugin for my client, so my file is external. js will work remotely from my server).

My external.js file is as follows:

if (typeof jQuery === "undefined") { var script = document.createElement('script'); script.src = 'js/jquery-1.7.1.min.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } if (typeof jQuery === "undefined") { var script = document.createElement('script'); script.src = 'js/fancybox.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } document.ready = function() { $(document).ready(function(){ $("#addimage").html("<a id='fancybox' href='large"+clientID+".jpg'><img border=0 src='thumb"+clientID+".jpg'/></a>"); } }); 

so I want this addimage div to only work with my jquery files completely

Answer 1

ok you need javascript loader .. you can use headjs or modernizr or yepnope. they have callback capabilities where you can put your scripts to run when a specific javascript file is already loaded.

www.headjs.com

www.modernizr.com

www.yepnopejs.com

Answer 2

On your root page, which loads all the other pages when you create an array, or a list of variables that are flags on a particular jQuery page, is loaded or not.

Write a procedure to not display any of the jQuery CSS containers until they are loaded, and set the flags loaded in the array / variable to true, using the function on the root page to set the flags.

So, the root page has:

  <script> $JQueryPage1Ready = false; $JQueryPage2Ready = false; $JQueryPage3Ready = false; // Your JQuery loaded pages have javascript within them to call this function function setJQueryPageToReady($PageNo) { switch ($PageNo) { case 1: $JQueryPage1Ready = true; break; case 2: $JQueryPage2Ready = true; break; case 3: $JQueryPage3Ready = true; break; } // Check all pages are loaded if ($JQueryPage1Ready && JQueryPage2Ready && JQueryPage3Ready) { $("JQueryPage1Container").show(1000); $("JQueryPage2Container").show(1000); $("JQueryPage3Container").show(1000); } } <script> 

JQuery loaded page 1

  <script> setJQueryPageToReady(1); <script> 

JQuery loaded page 2

  <script> setJQueryPageToReady(2); <script> 

JQuery loaded page 3

  <script> setJQueryPageToReady(3); <script> 

There may be other ways, but this is what first appeared in my head.