Using exThumbImage settings option does not lazy load

[ivanbacher]

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

• Browser and version - Chrome/Brave
• OS - Mac
• lightGallery version - 2.7.2

Additional context

[Thomas-ivhq]

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)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.