Vue Bootstrap Lazy Load MDB Pro component

Vue Lazy Load - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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>