Optimize Page Speed with jQuery Waypoints

My current project is a web reporting tool. Each report includes several highcharts 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 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.