Lazy Page Loading

Computers on campus have a number of default tabs when you open a web browser. IT Services were recently asked to add the Students’ Union website to these default tabs which threw up a couple of concerns. Firstly, we were occasionally finding that the site caused some versions of IE to crash (this has now been fixed by the company who create the website) and secondly, the more tabs opening simultaneously the slower the browser is when it first loads up.

To solve these problems we created a lazy page loading script. Lazy loading is a technique commonly used within a web page to defer loading parts of the page until they needed. For example, a long page containing lots of images won’t show the images until you scroll down towards them.

With browser tabs, a similar issue is present – we were loading three large pages when typically only the first would ever be seen. Using a lightweight web page with a bit of JavaScript we’re able to set the tab title and then redirect to the real page only when you switch tab. If you’re interested, here’s the JavaScript:

<script type="text/javascript">
window.onfocus = function() {
location.href = '';

You can see it in action by opening this lazy load link in a new tab before switching to it. The change to student PCs is being made as I type so we’d be interested if you notice any difference in speed when you open a browser on campus!

3 thoughts on “Lazy Page Loading

  1. Clever, but feels like a pretty horrible user experience. Do you have any kind of stats which shows that people do switch to the tabs you’ve opened for them?

  2. Looks like quite a nifty bit of (simple) code. Will have to remember that one. Thanks Mike.

Comments are closed.