Lazy loading images to boost website
Layzr.js is a small, fast and dependency-free library for lazy loading images. This library makes it completely painless — maximizing speed by keeping options to a minimum. Lazy loading of images boosts page speed by loading of images until they’re in view-able part of the screen.
Recently, I was working on a project which included alot of Hi-Def images. Every time the website used to take too long to load entirely. So, I thought of reducing size of the images by reducing the DPI of the images in Photoshop. By reducing the DPI, the site loading reduced to some extent, but still I was not satisfied. Upon searching over the web came across this layzr.js a jquery plugin to lazy load images. This helped alot and the client also turned out to be happy.
For each image, put a placeholder in the src attribute, the regular image in the data-layzr attribute, and the retina image in the data-layzr-retina attribute. It is simple to use:
[code lang=”html”]
<script src=”layzr.js”></script>
<img src=”optional/placeholder” data-layzr=”normal/image” data-layzr-retina=”optional/retina/image”>
<script>
var layzr = new Layzr({
selector: ‘[data-layzr]’,
attr: ‘data-layzr’,
retinaAttr: ‘data-layzr-retina’,
bgAttr: ‘data-layzr-bg’
});
</script>
[/code]
