Web development is sometimes just a matter of knowing the right name for something you want to do, finding a script (or a plugin) which can carry it out and implementing it. If you don’t know the name though, it can take longer.
I have a problem with my Photo Dharma website. Photos take time to load, and the more there are, the more time it takes. On most pages that is no problem at all, as there are normally only around 20-50 thumbnails on the page, and visitors may not notice the delay.
In a few of the collections though there are large numbers of photographs to display (up to nearly 300 on one page from Borobudur), and this can cause major delays for any potential visitor.
Earlier in the year I solved this problem by splitting the pages up, and making 3, 4 or sometimes 5 pages to contain them all. This is OK, but it means there is a further inconvenience as you need to load more pages to see the whole collection, and they cannot all be played in one and the same slideshow.
So I needed to solve that problem. I thought one way might be to simply not display sections until required, which can be done with a CSS display:none division, which is revealed when a user clicks a link or button.
That sounds good, but the browser still tries to load all the photos at the initial page loading leading to the same unacceptable delay, so it didn’t work.
I then thought about implementing an infinite scrolling script. Infinite scrolling is the sort of thing you see on Google Image Search or Facebook. As soon as you get close to the bottom of the page, more of it loads. Infinitely – at least potentially.
The problem with that is all the scripts I saw load only on demand, and therefore are not available to the slideshow at the beginning. To be able to play that all the way through, you would need to get to the bottom of the page first. So that was also out.
Searching the Net high and low for something that would do what I needed, I eventually came across the idea of lazy-loading. The technique is similar to infinite scrolling, in that it only loads on demand, but differs from it in that (in at least the one I implemented) it loads a very light image as a placeholder, until it is replaced when needed.
The advantage of that is that the whole page loads, including the references to all the images, so the slideshow is ready to go, but not all the images themselves load on the initial page. Only when you scroll down do they get loaded, which effectively spreads the page-load over time.
The script I eventually decided to use is Lazy Load Plugin for jQuery. The beauty of this script is that it is light, simple and easy to implement. It requires loading jQuery, but that is a framework I am using anyway to implement various facilities on the website, so it costs virtually nothing in terms of load time.
Anyway, I spend a lot of time on development and hope that all the hard work does in the end go to improve visitor experience. Talking of visitors, the Photo Dharma site now gets an average of around 5,000 visitors and 25,000 page views a week (!) which is an awful lot of viewing going on out there.
