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
Solved

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

Posted on 2010-09-05
3
311 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
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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

837 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