Infinite scroll

Vue Bootstrap 5 Infinite scroll

Bootstrap 5 Lazy Loading is a feature, that allows you to load images or videos only when they are visible on the screen.

Note: Read the API tab to find all available options and advanced customization

Basic example

Lazy Loading will automatically initialize after adding v-mdb-lazy directive to your img or video element. It is important to add src binding value - otherwise, Lazy Load will throw an error.

Scroll down to see an image

Example image 
        
            
            <template>
              <MDBContainer
                class="mt-5"
                style="height: 500px; overflow-y: scroll"
                id="lazy-container-1"
              >
                <MDBRow class="text-center" style="height: 800px">
                  <p>Scroll down to see an image</p>
                  <p><i class="far fa-arrow-alt-circle-down fa-3x my-4"></i></p>
                  <img
                    v-mdb-lazy="{
                      src:
                        'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
                      placeholder: 'https://place-hold.it/1321x583?text=Loading',
                      parent: '#lazy-container-1'
                    }"
                    alt="Example image"
                    class="img-fluid lazy my-3"
                    style="margin-top: 50% !important"
                  />
                  <video
                    class="lazy img-fluid"
                    v-mdb-lazy="{
                      src: 'https://mdbootstrap.com/img/video/Sail-Away.mp4',
                      delay: 1000,
                      placeholder: 'https://place-hold.it/838x471?text=Loading',
                      parent: '#lazy-container-1'
                    }"
                    muted="muted"
                    autoplay="autoplay"
                  ></video>
                </MDBRow>
              </MDBContainer>
            </template>
          
        
    
        
            
            <script>
              import { mdbLazy, MDBContainer, MDBRow } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbLazy
                },
                components: {
                  MDBContainer,
                  MDBRow
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                mdbLazy as vMdbLazy,
                MDBContainer,
                MDBRow
              } from 'mdb-vue-ui-kit';
            </script>

Offset

Use offset binding value to define an additional amount of pixels after which image or video will show.

Scroll more down to load a picture.

Example image 
        
            
            <template>
              <img
                v-mdb-lazy="{
                  src:
                    'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
                  delay: 1000,
                  offset: 500,
                  placeholder: 'https://place-hold.it/1321x583?text=Loading'
                }"
                alt="Example image"
                class="img-fluid lazy"
              />
            </template>
          
        
    
        
            
            <script>
              import { mdbLazy } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbLazy
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
            </script>

Error

Use error binding value to define a picture that will show if image or video doesn't load.

Example image 
        
            
            <template>
              <img
                v-mdb-lazy="{
                  src: 'sample',
                  delay: '1000',
                  placeholder: 'https://place-hold.it/1321x583?text=Loading',
                  error: 'https://place-hold.it/1321x583?text=Error'
                }"
                alt="Example image"
                class="img-fluid lazy"
              />
            </template>
          
        
    
        
            
            <script>
              import { mdbLazy } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbLazy
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
            </script>

Animations

Use animation binding value to specify which animation you want to activate when element loads.

Example image
Example image 
        
            
            <template>
              <img
                v-mdb-lazy="{
                  src:
                    'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
                  delay: 1000,
                  placeholder: 'https://place-hold.it/1321x583?text=Loading',
                  animation: 'zoom-in'
                }"
                alt="Example image"
                class="img-fluid lazy mb-3"
              />
              <img
                v-mdb-lazy="{
                  src:
                    'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
                  delay: 1000,
                  placeholder: 'https://place-hold.it/1321x583?text=Loading',
                  animation: 'tada'
                }"
                alt="Example image"
                class="img-fluid lazy"
              />
            </template>
          
        
    
        
            
            <script>
              import { mdbLazy } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbLazy
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
            </script>

Container

Initialize a set of elements at once by adding v-mdb-lazy directive to their container. If you set attributes in the parent, all of img and video elements inside will inherit them. You can overwrite them by declaring these attributes in inner elements as data-lazy-"name of binding value"

Example image Example image 
        
            
            <template>
              <MDBContainer>
                <MDBRow
                  v-mdb-lazy:container="{
                    placeholder: 'https://place-hold.it/1321x583?text=Loading',
                    error: 'https://place-hold.it/1321x583?text=Error',
                    delay: 1000
                  }"
                >
                  <img data-lazy-src="." alt="Example image" class="img-fluid" />
                  <img
                    data-lazy-src="https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp"
                    data-lazy-animation="tada"
                    alt="Example image"
                    class="img-fluid my-3"
                  />
                  <video
                    class="img-fluid"
                    data-lazy-src="https://mdbootstrap.com/img/video/Sail-Away.mp4"
                    muted="muted"
                    autoplay="autoplay"
                    data-lazy-animation="zoom-in"
                  ></video>
                </MDBRow>
              </MDBContainer>
            </template>
          
        
    
        
            
            <script>
              import { mdbLazy, MDBContainer, MDBRow } from 'mdb-vue-ui-kit';

              export default {
                directives: {
                  mdbLazy
                },
                components: {
                  MDBContainer,
                  MDBRow
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                mdbLazy as vMdbLazy,
                MDBContainer,
                MDBRow
              } from 'mdb-vue-ui-kit';
            </script>

Infinite scroll - API

Import

        
            
          <script>
            import {
              mdbLazy
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
src String '' Defines the source of an element
placeholder String '' Defines a picture that is shown before loading a proper element
error String '' Defines a picture that is shown if an error with showing element occurs
delay Number 500 Defines delay after which element will show
offset Number 0 Defines an additional offset after which element will show
media Number 0 Set the minimum width in pixels for which the sticky should work
animation String '' Defines animation during element showing