Optimize Page Speed with jQuery Waypoints

My current project is a web reporting tool. Each report includes several “highcharts”:http://www.highcharts.com to present data interactively to the user. The site performs just fine in modern browsers, but IE 7 and 8 just can’t take the workload. With the charts enabled, pages were taking seconds longer to load in IE for some users. All that time was spent executing JavaScript

“jQuery Waypoints”:http://imakewebthings.github.com/jquery-waypoints/ provided a perfect solution. Graphs that aren’t visible don’t do anyone any good, so why not load the graph when the user scrolls to it?

To initialize a chart or other complex JavaScript component the first time it’s scrolled into view, simply change



$(domNode).waypoint(function() {
}, {offset: "100%", triggerOnce: true});

An added bonus for us was that this approach allowed us to animate each new graph into view, making the site feel more interactive and dynamic.