Skip to main content

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.

Installation

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>

NOTE: It is not recommended to use one element with Aos js, because the Aos js transition will not be visible while the image is still loaded.

For complete documentation read in here