JavaScript Loading Order with load.js

December 24, 2011

We’ve been having an intermittent problem at work with the jQuery DataTables plugin. If you’re not familiar with the plugin (and its plugins), we’re using it to give several of our HTML tables spreadsheet-like capability:

  • Frozen header
  • Frozen column, if conditions are met
  • Column header sorting
  • Infinite scrolling

Problem

Inconsistent rendering is the problem. Roughly every tenth page load we’ll see at least one of the following:

  • Frozen column too small
  • Scroll bar missing
  • Table showing too few rows

Hunch

As this defect became a higher and higher priority, we had a hunch that DataTables and its several plugins were probably loading in the wrong order when we’d see these odd defects.

load.js

One project ago, in the beginning of the year, I noticed the introduction of load.js on the programming subreddit. We didn’t need it at the time, but it seemed perfect for this. Sure enough, its fluent syntactical goodness appears to have solved our defect.

Lesson

Keep your eyes open, the requirements of the next project are rarely known.


Profile picture

Written by @sghill, who works on build, automated change, and continuous integration systems.