Holy moly, that is complicated! No, you don't need to do any of that.
Even if it were the right approach, it's poorly coded, with the same
ten-line function duplicated three times, and a completely hard-coded,
non-generalized way of handing the load sequencing. (What do you do if you
need to add *another* .js file, or two or three? Add another special load
function for each one, and another nested callback at the end?)
My apologies to the developer who coded this - it's nothing personal -
please don't shoot the messenger!
Assuming that you want to keep the mts_loader.js file, then all you need to
do is change it to:
== mts_loader.js ==
function script( url ) {
document.write(
'<script type="text/javascript" src="', url, '">',
'<\/script>'
);
}
script(
'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' );
script( 'http://www.mydomain.com/js/jquery.simplemodal-1.1.1.js' );
script( 'http://www.mydomain.com/js/mts_finan.js' );
== end mts_loader.js ==
That's it! That's the whole thing.
The complicated sequencing logic is made unnecessary by using simple
<script> tags and document.write. They automatically get executed in the
order they are written to the document.
It will also cut at least .9 seconds off your page load time, since the
existing code waits at least .3 seconds after loading each file.
Now, the question of *where* host your .js files and whether to combine them
is separate from the question of *how* to load them. Let's cover the "where"
separately, since it is independent of the loading technique.
-Mike
> From: Alex Weber
>
> Thanks for the reply Mike, here goes: (the ==pagename.ext==
> denotes a new file - sure there are better ways of doing this
> but i hope its
> legible)
>
> ==index.html==
>
> <script type="text/javascript"
> src="http://www.mydomain.com/js/ mts_loader.js"></script>
>
> ==mts_loader.js==
>
> var mts_finan_times, mts_finan_timeout, mts_finan_loaded,
> mts_finan_callback;
>
> function mts_finan_waitFor(loaded, callback) {
> mts_finan_timeout = 300;
> mts_finan_times = 40;
> mts_finan_loaded = loaded;
> mts_finan_callback = callback;
> mts_finan_wait();
> }
>
> function mts_finan_wait(){
> if(mts_finan_times > 0){
> if(!mts_finan_loaded()){
> mts_finan_times -= 1;
> setTimeout('mts_finan_wait()',
> mts_finan_timeout);
> } else {
> mts_finan_callback();
> }
> }
> }
>
> function mts_finan_loadJQuery(){
> if(!window.jQuery){
> var head;
> head = document.getElementsByTagName('head')[0];
> if (!head) { return; }
>
> var jquery = document.createElement('script');
> jquery.type = 'text/javascript';
> jquery.src =
> 'http://www.mydomain.com/js/jquery-1.2.6.pack.js';
> head.appendChild(jquery);
> }
> }
>
> function mts_finan_loadModal(){
> if(window.jQuery && !window.jQuery.modal){
> var head;
> head = document.getElementsByTagName('head')[0];
> if (!head) { return; }
>
> var modal = document.createElement('script');
> modal.type = 'text/javascript';
> modal.src = 'http://www.mydomain.com/js/
> jquery.simplemodal-1.1.1.js';
> head.appendChild(modal);
> }
> }
>
> function mts_finan_laod(){
> if(window.jQuery && window.jQuery.modal){
> var head;
> head = document.getElementsByTagName('head')[0];
> if (!head) { return; }
>
> var finan = document.createElement('script');
> finan.type = 'text/javascript';
> finan.src = 'http://www.mydomain.com/js/mts_finan.js';
> head.appendChild(finan);
> }
> }
>
>
> (function init(){
> mts_finan_loadJQuery();
> mts_finan_waitFor(
> function(){
> return !!(window.jQuery);
> },
> function(){
> mts_finan_loadModal();
> mts_finan_waitFor(
> function(){
> return !!(window.jQuery.modal);
> },
> function(){
> mts_finan_laod();
> }
> );
> });
> })();
>
> ==mts_finan.js==
>
> // here i assume everything is loaded and fire off the modal
> window with content. no big secret here.
>
>
> so basically, i inherited this code and don't like it one bit
> but the guy who developed it insists its the best way to do this.
>
>
> my proposed changes (based on feedback ive received) are:
>
> 1) use minified jquery and plugins instead of packed for
> 2) use google code or some other proper hosting service to
> host jquery and plugins
> 3) gotta work on mts_loader.js
>
>
> see what i mean now?
>
> it checks for the existence of jquery and once its there
> loads the plugins and tests if its there and only then does
> it load my file
> (mts_finan.js)
>
> hope this explains more than confuses! thanks! :)
>
> -Alex
>
> On Aug 30, 2:15 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> > > From: Alex Weber
> >
> > > Currently what I'm doing is:
> >
> > > 1) Call function 1, checks for jQuery and if not then loads the
> > > library and recursively checks until its available.
> > > 2) Once its available, a second function is called and
> does the same
> > > thing to load a plugin
> > > 3) Ditto for my custom .js file
> >
> > You really need to post a link to a test page that illustrates your
> > loading technique. Or at least, post a complete HTML+JS
> example with
> > real code in a message here.
> >
> > From your description, it's anyone's guess what you're
> actually doing.
> > Does "loads" mean "document.write() a script tag", or "create a
> > dynamic script element", or what? Does "recursively" mean
> repeated calls to setTimeout?
> > (BTW, that may look recursive, but it isn't.) Does "checks" mean...
> > Well, you get the idea.
> >
> > My guess was that you're using dynamic script elements to
> load the .js
> > files, and watching for certain symbols becoming defined on
> repeated
> > setTimeout calls. But that is such a complicated solution
> that I have
> > to think I guessed wrong.
> >
> > > I don't like this because of the excessive opening and closing of
> > > connections required... is combining libraries + custom
> code into 1
> > > file a terrible pratice?
> >
> > Of course not! Who ever said combining .js files was a
> terrible practice?
> > The fewer the files you download, the better. Combine all
> of your .js
> > files into a single file, with the likely exception of
> jquery.min.js
> > since you can let Google pay for that one.
> >
> > > Any other decent way to get by this step-by-step
> rudimentary approach?
> >
> > Well, tell us in painstaking detail exactly what you need to
> > accomplish. Is this just an HTML page that needs to load
> some .js files? Like, "Hello?
> > Script tags?" Since you currently have a more complicated method,
> > there must have been some reasons you chose that - something that a
> > plain script tag wouldn't accomplish?
> >
> > BTW, if you do use Amazon S3 as I suggested, there is one wrinkle:
> > They don't GZip your files for you - you have to take care of that
> > yourself. But forget that for the moment and let's make sure the
> > problem you're trying to solve is clearly explained.
> >
> > So post your current code and your requirements, and let's take it
> > from there.
> >
> > -Mike
>
