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 Cancel reply

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

QR code

SHORTLINK

RSS Feeds

  • All Posts
  • Texts
  • Photos

Donations

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

choose amount:


Donations can also be sent in Litecoin to the following address: LQZ9fVHF3wL6ihwEUcRFiCpcD7f2dfd3Kp

Recent Posts

  • Two Innovative Temples in Petchabun
  • Two Photo Albums from Phimai Published
  • Photographs from Prasat Phanom Rung
  • Publication of the Introduction to the Jataka Stories
  • A Revised Presentation of the Jātaka Commentary
  • Comparative Dhammapada Table
  • Suttapitaka Index, with links to Pali Text and Translations
  • Karmavibhanga Stories Published in Hard Copy
  • Publication of The Theravāda Lineage (Nikāya Sangrahaya)
  • Paintings from the Thousand Buddhas Caves Published

Top 10 Tags

  • Books
  • Buddha
  • Dhamma
  • Ethics
  • India
  • Monks
  • Poetry
  • Sri Lanka
  • Temples
  • Wisdom

Recent Posts

  • Two Innovative Temples in Petchabun
  • Two Photo Albums from Phimai Published
  • Photographs from Prasat Phanom Rung
  • Publication of the Introduction to the Jataka Stories
  • A Revised Presentation of the Jātaka Commentary
  • Comparative Dhammapada Table
  • Suttapitaka Index, with links to Pali Text and Translations
  • Karmavibhanga Stories Published in Hard Copy
  • Publication of The Theravāda Lineage (Nikāya Sangrahaya)
  • Paintings from the Thousand Buddhas Caves Published

Other Posts

  • Buddhas and Murals at the Po Win Caves – 2
  • Kondane Caves, Rajmachi, India
  • The Life of the Buddha at Borobudur on Photo Dharma
  • Dhammapada Posters on Photo Dharma IV
  • BWV 053: Friendship knows no Boundaries
  • Bhikkhu Moneyya: The Duration of the Buddha Sasana
  • Redesign of Photo Dharma Website
  • A History of Passports
  • Dhammapada Posters on Photo Dharma II
  • Ruined Temples in Ayutthaya

Related Posts

  • Facebook Comments: Dynamic Urls on Static Pages
  • Gaṇḍavyūha Book released as PDF
  • New Design and Upgrade of Photo Dharma Website
  • Creating New Tags in Html5
  • Facebook Profile to Page Conversion, My Experience
  • Dharma Records Blog at New Address
  • Making short urls using javascript and a .htaccess file
  • Bhikkhu Sumedha: His Teachings and Paintings
  • New Website: Buddhasāsana
  • 135 hours of Recordings on Ancient Buddhist Texts
© 2021 Dharma Records | Powered by Minimalist Blog WordPress Theme