Topic: Load gallery picture with lazy loading

DerLino free asked 10 months 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 10 months 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