Load gallery picture with lazy loading


Topic: Load gallery picture with lazy loading

DerLino asked 3 years ago

Hello,

is there a way how I can load only pictures if they are actually seen in the gallery plugin for example with Lazy Loading. I already know that there is a method to use thumbnails for the performance but it will be cool if there is an even better way.

Best regards Lino


Grzegorz Bujański staff answered 3 years ago

This option is not available by default. But you can add lazy loading to thumbnails images:

<div class="ecommerce-gallery">
  <div class="row">
    <div class="col-12 mb-1">
      <div class="lightbox">
        <img
          data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
          data-mdb-lazy-placeholder="https://place-hold.it/1321x583?text=Loading"
          alt="Table Full of Spices"
          class="ecommerce-gallery-main-img active w-100"
        />
      </div>
    </div>
    <div class="col-4 my-1">
      <img
        data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
        data-mdb-lazy-placeholder="https://place-hold.it/1321x583?text=Loading"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
        alt="Table full of spices"
        class="lazy active w-100"
      />
    </div>
    <div class="col-4 my-1">
      <img
        data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
        data-mdb-lazy-placeholder="https://place-hold.it/1321x583?text=Loading"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
        alt="Winter Landscape"
        class="lazy w-100"
      />
    </div>
    <div class="col-4 my-1">
      <img
        data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
        data-mdb-lazy-placeholder="https://place-hold.it/1321x583?text=Loading"
        data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
        alt="View of the City in the Mountains"
        class="lazy w-100"
      />
    </div>
  </div>
</div>



document.querySelectorAll('.lazy').forEach((el) => {
  const lazyElement = new mdb.LazyLoad(el)
})

Adding lazy loading to the main image unfortunately causes an error


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Computer
  • Browser: Firefox
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No
Related topics