Solved

How can i defer loading of certain javascript files until everything else has loaded?

Posted on 2010-09-05
3
314 Views
Last Modified: 2013-11-19
Hi, i'm writing a text editor with a bunch of features, the problem is that the page (and hence my editor toolbar) takes some time to load due to all the javascript files it's pulling in. What i realized however is that not all files should be necessarily loaded up straight away. For example the code for the right-click context menu could be deferred, and even the spell checker (which is very large!) need not really be loaded straight away (but moments later). I'd be happy for these features be loaded AFTER everything else. So ideally wouldn't even start to load until everything else INCLUDING other javascripts resources are loaded (not just the html). In jquery i use:

$(document).ready()

.. to execute my code which initializes the toolbar functionality. Note the toolbar is actually constructed via javascript, i.e. it takes the html code and converts it into some windows tab style. As a result the toolbar can't be rendered until document.ready() gets executed (i hide the toolbar until this code is executed). Therefore that code is competing i guess with all the other javascript resources being downloaded on the page! If it was a plain html/css toolbar then obviously the toolbar would look fine immediately, if you're with me. So i ideally the javascript which constructs the toolbar should be run AFTER the html has been loaded but before certain javascript resource.

Any ideas as to how to resolve the dilema as described in this post's title? (Many thanks)
0
Comment
Question by:paddycobbett
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 150 total points
ID: 33607440
you can load those javascript files using jquery'
http://api.jquery.com/jQuery.getScript/
0
 
LVL 4

Accepted Solution

by:
MichaelMH earned 350 total points
ID: 33635525
You can do it also using plain JavaScript. You just have to ensure that all the resources in which you are interested are loaded first. The you can dynamically create/insert SCRIPT tags in the body and start loading the scripts you need.
0
 
LVL 1

Author Closing Comment

by:paddycobbett
ID: 33794358
thanks  =)
0

Featured Post

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question