search

sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.55k stars 1.29k forks source link

Using exThumbImage settings option does not lazy load #1659

Open ivanbacher opened 2 months ago

ivanbacher commented 2 months ago

Description

The code below (from documentation) seems to load all data-external-thumb-image thumbnails straight await. Is it possible to lazy load these?

<div id="lightGallery">
    <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
</div>

lightGallery(document.getElementById('lightGallery'), {
    exThumbImage: 'data-external-thumb-image'
})

I have a lot of images and am adding them dynamically to the page using js (see below). Loading all of the thumbnails at once slows the page down.

Steps to reproduce

JS code that you use to initialize lightGallery.

lightGallery(document.getElementById('lightGallery'), {
    exThumbImage: 'data-external-thumb-image'
})

Sample HTML markup

<div id="lightgallery">
</div>

JS used to add images to page

...
for (let i = 0; i <= 300; i++) {
      const a = document.createElement('a')
      const img = document.createElement('img')

      a.href = `...`
      a.setAttribute('data-external-thumb-image', `...`)

      img.setAttribute('data-src', `...`)
      img.setAttribute('width', '250')
      img.setAttribute('height', '250')

      a.appendChild(img)
      gallery.appendChild(a)
    }
...

Environment

Additional context

Thomas-ivhq commented 2 months ago

I think this might have something to do with light gallery not lazy loading thumbnails - specifically the ones in the opened gallery.

I've had this issue recently as well where all my thumbnails load at the beginning of the page load which could hurt page performance. I've also noticed this being brought up in other issues but it's yet to be addressed (#1453, #965, #805)