Dharma Records

A record of Ānandajoti’s publication work.

Menu
  • Notices
  • Talks
  • Texts
  • Audio
  • Video
  • Photos
  • Ecology
  • Culture
  • Archives
  • About
Menu

Lazy Loading on Photo Dharma

Posted on October 21, 2012September 26, 2012 by Ānandajoti

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.

 

Photo Dharma Statistics

 

Leave a Reply

Your email address will not be published. Required fields are marked *

QR code

SHORTLINK

Donations

there are many expenses involved in the making of this website. Even a small donation really helps to maintain and expand the site.

Recent Posts

  • Publication of the Pali Text Society’s Pali-English Dictionary
  • Dictionary of Pāli Proper Names Online
  • Photographs from the Ho Sian Temple in Taiping, Malaysia
  • New Book: The Reliefs of Buddhavanam
  • Photographs from Phanigiri Hilltop Monastery
  • Photos from Buddhavanam, Buddha’s Grove, 2
  • Photos from Buddhavanam, Buddha’s Grove, 1
  • My Big Fail: Kanaganahalli
  • Sites Around Visakhapatnam
  • Photographs from Bojjannakonda (Sankaram)

Top Ten Tags

Buddha

Dhamma

Sangha

India

China

Indonesia

Thailand

Temples

Wisdom

Ethics

Sponsorship

 hosting sponsored by exabytes.my 

Random Posts

  • Episodes from the Life of the Buddha 2: The Invitation
  • Karma-vibhanga Reliefs at Borobudur Published
  • New Website: Buddhasāsana
  • Moral Uplifting Society, Bukit Mertajam
  • BWV 066: Not Listening to Divisive Speech
  • The Discourse about Quarrels and Disputes
  • Programmes to Input Diacritics with Two Different Methods
  • The Life of the Buddha and his Disciples
  • Five New Albums from Hatyai, Thailand
  • A Mahākassapa for our Time

Recent Posts

  • Publication of the Pali Text Society’s Pali-English Dictionary
  • Dictionary of Pāli Proper Names Online
  • Photographs from the Ho Sian Temple in Taiping, Malaysia
  • New Book: The Reliefs of Buddhavanam
  • Photographs from Phanigiri Hilltop Monastery
  • Photos from Buddhavanam, Buddha’s Grove, 2
  • Photos from Buddhavanam, Buddha’s Grove, 1
  • My Big Fail: Kanaganahalli
  • Sites Around Visakhapatnam
  • Photographs from Bojjannakonda (Sankaram)

Related Posts:

  • Redesign of Photo Dharma Website
  • Facebook Comments: Dynamic Urls on Static Pages
  • Google Maps for all locations on Photo Dharma and…
  • Making short urls using javascript and a .htaccess file
  • Pan and Zoom style Slidehows on the Photo Dharma website
  • New Design and Upgrade of Photo Dharma Website
  • Writing Filenames into JPEG Comments and Captions…
  • Ajanta Caves, Final Day
  • Ancient Buddhist Texts: Print-on-Demand Integration
  • Final Set of Photos from Bali: The Collections
© 2025 Dharma Records | Powered by Minimalist Blog WordPress Theme