Load gallery picture with lazy loading

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