check whether all the jquery files are loaded then run the div related to it

问题

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

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/11599311/check-whether-all-the-jquery-files-are-loaded-then-run-the-div-related-to-it

标签

jquery

fancybox