0

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

I want to show my div only when all the jQuery files related to that div is loaded.

document ready and window load function doesn't work.

How to write a conditional function where u can check whether all the jQuery is loaded then show the div.... i am calling all my jQuery files in an external js file, (basically i am trying to create a plugin for my client so that my external.js file will work from my server remotely).

my external.js file goes like this:

   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 work only my jquery files is loaded completely

Christina
  • 199
  • 2
  • 12
  • if you write the script tag in html first ( who contain reference of function you are trying to call) then write your function then I am sure it's will help you in your case. – Anirudha Gupta Jul 22 '12 at 10:01
  • @AnkitGupta i am trying to create a plugin so i need to include my jquery libraries from my external js not in my clients source file. In that case can u pls help – Christina Jul 22 '12 at 10:04
  • you can check that jquery is installed/not this way http://stackoverflow.com/questions/400916/how-can-i-check-if-a-jquery-plugin-is-loaded – Anirudha Gupta Jul 22 '12 at 10:14

2 Answers2

1

In your root page which loads all the other pages in create an array or list of variables which are flags to the specific JQuery page is loaded or not.

Write a routine to not display any of the JQuery CSS containers till they have all loaded and set the array / variable loaded flags to true by using a function in the root page to set the flags.

So 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 popped into my head.

Darcey
  • 1,949
  • 1
  • 13
  • 22
0

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

www.headjs.com

www.modernizr.com

www.yepnopejs.com

Netorica
  • 18,523
  • 17
  • 73
  • 108
  • if you do have some question on how to use it you can ask me... but these script loaders are already well explained how to use in their homepages and documentation pages – Netorica Jul 22 '12 at 10:08