Fork me on GitHub
Go back to Devrama.com

Devrama Image Lazyload - jQuery Plugin

'Devrama Lazyload' loads images in document and containers as you scroll down. This makes the page load faster and reduce server traffic since the client loads the images in the region what they look at.

You can use 'Devrama Lazyload' for the entire document or the containers.

Examples

Example - Entire Page Example - Container Example - SEO Friendly

Download

v.0.9.3 Source Version & Minified Version
Github
Wordpress Plugin Available

How to use?

Include jQuery and jquery.devrama.lazyload.js

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.lazyload.js"></script>

1. Apply lazyload in the entire document

See Example.1 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.lazyload.js"></script> </head> <body> <!-- data-lazy-src: image url data-size: image width and height, this is optional but I recommend to set this option. --> <img data-size="1024:677" data-lazy-src="https://farm1.staticflickr.com/61/366959006_94023bb220_b.jpg"/> <img data-size="1024:588" data-lazy-src="https://farm8.staticflickr.com/7422/12470517524_95016a9972_b.jpg"/> <img data-lazy-src="https://farm4.staticflickr.com/3780/12466702475_2f24ede142_b.jpg"/> </body> </html>

Add data-lazy-src attribute instead src in the img tag. Optionally, you can add data-size attribute to set the size of image. In the code above, data-size="1024:677" means width is 1024 pixel, height is 677 pixel.

If you do not add data-size attribute, the position of images will be calculated assuming its size is 1x1 pixel. So, it is very important to set up data-size for the best performance.

<script type="text/javascript"> $(document).ready(function(){ $.DrLazyload(); //Yes! that's it! }); </script>

2. Apply lazyload in the container

See Example.2 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.lazyload.js"></script> </head> <body> <div id="content" style="overflow: scroll; height: 700px;"> <!-- data-lazy-src: image url data-size: image width and height, this is optional but I recommend to set this option. --> <img data-size="1024:677" data-lazy-src="https://farm1.staticflickr.com/61/366959006_94023bb220_b.jpg"/> <img data-size="1024:588" data-lazy-src="https://farm8.staticflickr.com/7422/12470517524_95016a9972_b.jpg"/> <img data-lazy-src="https://farm4.staticflickr.com/3780/12466702475_2f24ede142_b.jpg"/> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#content').DrLazyload(); //Yes! that's it! }); </script>

3. SEO Conern

See Example.3 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.lazyload.js"></script> </head> <body> <!-- data-lazy-src href: image url data-size: image width and height, this is optional but I recommend to set this option. --> <a data-size="1024:677" data-lazy-src href="https://farm1.staticflickr.com/61/366959006_94023bb220_b.jpg">Cloudy Sky</a> <a data-size="1024:588" data-lazy-src href="https://farm8.staticflickr.com/7422/12470517524_95016a9972_b.jpg">Dragonfly</a> <a data-lazy-src href="https://farm4.staticflickr.com/3780/12466702475_2f24ede142_b.jpg">Wall</a> </body> </html>

Since <img/> tag with lazyload does not have src attribue, it would not be SEO-friendly until Google provide guidance about it. In the mean time, you can use <a> tag instead of <img>. 'Devrama Lazyload' will automatically replace <a> tags by <img> tags.

Feedback

License

MIT license