I recently started experimenting with SyntaxHighlighter for making code on my blog more readable. Generally, SyntaxHighlighter has been great. However one issue I ran into was the number of files that need to be loaded. Each language has its own JavaScript file that must be loaded in order to display that particular language. This leads to slow page loads, even if the majority of the code is cached.
To solve this problem, I've written a dynamic JavaScript and CSS loader using jQuery. It is really very simple.
This class is a helper class to load external code. It assists with this process by allowing code to load asynchronously, and once it has all been loaded, to execute a given function.
Here is a simple example of how to use this loader:
In this example, the final function Teapot.initialize() will only be run after all the scripts have been loaded. The order of loading scripts is also enforced. This is important, because since the scripts are loaded asynchronously, we don't know when the Teapot will be available.
Here is the code which scans through all <pre> elements and loads the appropriate files:
In my main page HTML, I have the following which kicks the whole process off:
As you can see, due to the script loader, the code is relatively simple. As an alternative, my jQuery.Syntax highlighter dynamically loads all code by default, avoiding the need for additional loader scripts.
Comments
Leave a comment
Please note, comments must be formatted using Markdown. Links can be enclosed in angle brackets, e.g. <www.codeotaku.com>.
Comments
Leave a comment
Please note, comments must be formatted using Markdown. Links can be enclosed in angle brackets, e.g.
<www.codeotaku.com>
.