search

sachinchoolur / lightgallery.js

Full featured JavaScript image & video gallery. No dependencies
https://sachinchoolur.github.io/lightgallery.js/
Other
5.3k stars 596 forks source link

Lazyload thumbnails #205

Closed alvinkonda closed 3 years ago

alvinkonda commented 3 years ago

I'm using the dynamic mode, but it seems the thumbnails are not lazyloaded, which has caused the page size to be 25Mb. I have several gallery instances on the same page, and yes, I'm using the full image as the thumbnail.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.

wwwonka commented 3 years ago

Hey @alvinkonda, Just passing by. This is not a built-in solution but by using lightgallery in combination with progressive-image.js, you may automatically lazy-load the thumbnails on your page, all while having something quite good-looking on display while users are waiting. See.

For 780 bytes added to your build, it's a pretty good deal all things considered.

My current project uses v2, so it might differ for you, but here's the markup that has been working for me:

<template id="gallery-item">
    <a href="img-thumb.jpg" class="progressive replace" data-src="img-full.jpg" data-lg-size="3000-3000">
        <img src="img-tiny.jpg" class="main-gallery-img preview" onload="this.style.opacity=1">
    </a>
</template>

Taught this was worth sharing and in case @sachinchoolur is listening, collecting ideas for future plugins...!

Cheers 🖖.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.