What is LazyLoad?

Lazy load delays loading images in long web pages with big images. Images outside of viewport will not be loaded before users scrolls to them.

This is especially helpful for single page websites that are highly visual. One issue with this comes when someone opens the webpage in preparation of loading the site before losing their internet connection, but then will not get the benefit of any images below the fold.

SOURCE

How to user Lazy Load?

Lazy Load depends on jQuery. Include them both in end of your HTML code:

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

This demonstration code excerpt how to put in the HTML page the code.

Now it is necessary to include the lazy load plugin:

You must alter your HTML code. Put the place holder image into src attribute. It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to.

        <  img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
        <  img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />

If you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses data-original by default. This should be a drop in replacement for the previous version of the plugin.

$("img.lazyload").lazyload();

This image is an example of how you view the site when you use lazy load.

SOURCE

As you can see the second image is blurred because it has not yet fully discharged. This was because I was still a srcool of the mouse and was taking the image to be able to charge.

This plugin is very easy to use and practical and helps me a lot when I develop online stores where you have many products on the homepage.

Follow me on Steemit

@portugalcoin

---

Posted on Utopian.io - Rewarding Open Source Contributors

---