Initialize load times for hidden controls

Question

Our web application began as a large "ASP.NET AJAX" page containing the controls on it. They all shared a small set of large .js and .css files. I need to use some of these controls on other, unrelated pages around our site. The difficulty lies in all the other things that .css and .js files bring with them when I try to use these controls elsewhere - too much, and there are a lot of twists, too few, and the controls do not work.

So, I experimented with unpacking .css and .js and writing the controls to register the .js and .css that they need. At first I get much more, but fewer .js and .css files, but I can combine them at runtime later. I just want to encapsulate these controls so that the pages that use them know less about what is needed to use them.

But I ran into a problem. I use OnInit or OnLoad to register .css and .js as needed. Unfortunately, none of these methods is called if the control is not displayed the first time you click on the page, when all .css and .js must make their way to the client. Only then will controls be included for certain functions that they are visible, and can generate .js or .css. Then it's too late!

Do I need to bite the bullet and the pen to include the right .css / .js on the pages where I use these controls, or is there a better way to "inventory" the controls used to make them emit what they need?

Answer 1

I assume that the problem you are facing is that some controls are loading dynamically (i.e. in the update panel). This is a difficult problem - usually because you don’t know in advance which controls you will need, and therefore enable JS + CSS.

, JS CSS script?
YUI script MS one spring, ( , ).

. . . MS script YUI scriptloader.

, MS, MS script, , MS script CSS (, - ), , , YUI (, , CSS, - ).

script , , javascript. , javascript , , javascript, .

. ,

  <div id="my control">
    <script type="text/javascript>
      foo(); // foo is defined in foo.js, which is included in a script element in the head
      ... more script ...
    </script>
    ....
  </div>

, script, ,

  <div id="my control">

    <script type="text/javascript>
      var onLoadHandler = function() {
        foo();
        ... more script ...
      };
      Sys.loader.registerScript("foo_package_name", null, onLoadHandler); 
    </script>
  </div>

Answer 2

, js css , . html, . , JS - HTML, CSS .

, , , , . javascript.

, , - , .