Vanilla LazyLoad

Lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport.

How to install?

Add script right before closing </body> tag, and initialize Lazyload

                
                  <!-- Plugin js -->
                  <script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>

                  <!-- Theme js -->
                  <script src="src/js/theme.js"></script>

If you want to editing Lazyload js open file theme.js and edit this function myLazyload();

How to trigger lazyload

In order to make your content be loaded by LazyLoad, you must use some data- attributes instead of the actual attributes.

Example

Lazy image:

                
                  <img alt="A lazy image" class="lazy" data-src="lazy.jpg">

Lazy image with low quality placeholder:

                
                  <img alt="A lazy image" class="lazy" src="lazy-lowQuality.jpg" data-src="lazy.jpg">

background image:

                
                  <div class="lazy" data-bg="lazy.jpg"></div>

Lazy video:

                
                  <video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
                    <source type="video/mp4" data-src="lazy.mp4" />
                    <source type="video/ogg" data-src="lazy.ogg" />
                    <source type="video/avi" data-src="lazy.avi" />
                  </video>

Lazy iframe:

                
                  <iframe class="lazy" data-src="lazyFrame.html"></iframe>

For complete documentation read in here