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
initializeChart(domNode);
to
$(domNode).waypoint(function() {
initializeChart(domNode);
}, {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.