Lazy-loading of images
When lots of images are getting loaded, it will slow down the client browser; too many image requests will even slow down the web server. One common approach is to split the pages and distribute images and content equally. Another approach is to exploit JavaScript's power and avoid unnecessary image requests at the client level. The latter technique is called lazy-loading . In lazy-loading, the image requests are blocked until the image gets under the browser viewport, that is, until the user has physical view of the image.
Getting ready
We'll require a lengthy image gallery page to see how a lot of images on the page affects loading experience. We'll then have to decide between different approaches of lazy-loading implementation.
How to do it...
We can address lazy-loading through the following methods:
Pure JavaScript
Mangled HTML markup
Pure JavaScript approach
In this approach, images won't be referenced in HTML; they'll only be referenced in JavaScript—either hardcoded...
