Scheduling tasks to run on load in JavaScript

JavaScript developers often require code to be executed as soon as the page has loaded. Traditionally this has been accomplished by adding listeners for the load event on the window object, but this technique has two major limitations: there is no way to prioritise some tasks over others, and the tasks are only run when every part of the document — potentially including large external files — has loaded.

OnloadScheduler removes these limitations by allowing tasks to be scheduled with a priority, and running these tasks as soon as possible after the browser has downloaded and parsed the document’s HTML and the DOM is ready for manipulation.

Download OnloadScheduler

Download one of the files below and upload it to your web server.

Link to the file using a script element in the head of your page:

1

<script type="text/javascript" src="OnloadScheduler.js"></script>

Scheduling tasks

Tasks can be scheduled using the schedule function of the OnloadScheduler object. The task can be either a function or a code string:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// define a function
function example(){
  alert('I am an example function');
}

// schedule the function to be executed
OnloadScheduler.schedule(example);

// schedule a code string to be executed
OnloadScheduler.schedule('alert(\'I am an example code string\');');

Using priorities

For finer control over scheduling, tasks can be assigned priorities. Higher priority tasks are run before lower priority tasks, and tasks with the same priority are run in the order in which they were scheduled. Priorities are represented as integers, either positive or negative, and the default priority (which is used when a priority is not specified, as in the examples above) is zero. As is conventional in computer programming, higher priorities are represented by lower numbers. To specify a priority, pass it as a second parameter to the schedule function:

1
2
3
4
5

// schedule a set of functions at different priorities
OnloadScheduler.schedule(functionA);
OnloadScheduler.schedule(functionB, -1);
OnloadScheduler.schedule(functionC,  0);
OnloadScheduler.schedule(functionD,  1);

In this example functionB will be executed first, as it has the highest priority, followed by functionA and functionC, which have priority zero, and then finally functionD, which has the lowest priority.