Vue Bootstrap Lazy Load MDB Pro component

Vue Lazy Load - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

The mdb-lazy-load is a custom directive which loads media only when they are visible on the screen.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'

        
            
      <script>
        import {
          mdbLazyLoad
        } from "mdbvue";
      </script>

Step 2: Add mdbLazyLoad to the directives object 

        
            
      <script>
        import {
          mdbLazyLoad
        } from "mdbvue";
        export default {
          directives: {
            mdbLazyLoad
          }
        };
      </script>

Step 3: Attach the directive to wrapper of elements which have to be loaded. SRC attribute should be added to image or video as data-src. Use loading key to define preloaded image. 

        
            
      <template>
        <section v-mdb-lazy-load="{ loading: 'https://placehold.it/1321x583?text=Loading' }">
          <img data-src="https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp" alt="Example image"
            class="img-fluid mb-1" />
          <img data-src="https://mdbootstrap.com/img/Photos/Slides/img%20(103).webp" alt="Example image"
            class="img-fluid mb-1" />
          <img data-src="https://mdbootstrap.com/img/Photos/Slides/img%20(104).webp" alt="Example image"
            class="img-fluid mb-1" />
          <img data-src="https://mdbootstrap.com/img/Photos/Slides/img%20(105).webp" alt="Example image"
            class="img-fluid mb-1" />
          <img data-src="https://mdbootstrap.com/img/Photos/Slides/img%20(106).webp" alt="Example image"
            class="img-fluid" />
        </section>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbLazyLoad
        } from "mdbvue";
        export default {
          directives: {
            mdbLazyLoad
          }
        };
      </script>

Options

Name Type Default Description Example
selector String 'img' Specifies the selector of elements to load inside wrapper. Available values are 'img', 'video' or 'this'. 'This' is useful to use lazy load without any wrappers. <div v-mdb-lazy-load="{ selector: 'img' }" ></div>
offset Number 0 Specifies the offset from bottom when the element has to be loaded <div v-mdb-lazy-load="{ offset: 20 }" ></div>
animation String 'fadeIn' Specifies the animation for loading elements <div v-mdb-lazy-load="{ animation: 'tada' }" ></div>
error String 'https://placehold.it/600x400?text=Loading' Specifies image to load in case of an error <div v-mdb-lazy-load="{ error: 'https://placehold.it/600x400?text=Loading' }" ></div>
loading String 'https://placehold.it/600x400?text=Loading' Specifies preloaded image <div v-mdb-lazy-load="{ loading: 'https://placehold.it/600x400?text=Loading' }" ></div>