Skip to content

feat(thumbnail): Lazy load thumbnails #1720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
principis wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(thumbnail): Lazy load thumbnails #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/lg-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,6 @@ const utils = {
dynamicEl.alt = alt || title || '';
dynamicElements.push(dynamicEl);
});
console.log(dynamicElements, 'dynamicElements');
return dynamicElements;
},
isMobile(): boolean {
Expand Down
7 changes: 7 additions & 0 deletions src/plugins/thumbnail/lg-thumbnail-settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@ export interface ThumbnailsSettings {
* Custom translation strings for aria-labels
*/
thumbnailPluginStrings: ThumbnailStrings;

/**
* Enables thumbnail lazy loading when in view
*/
thumbnailLazyLoad: boolean;
}

export const thumbnailsSettings: ThumbnailsSettings = {
Expand All @@ -107,6 +112,8 @@ export const thumbnailsSettings: ThumbnailsSettings = {
loadYouTubeThumbnail: true,
youTubeThumbSize: 1,

thumbnailLazyLoad: false,

thumbnailPluginStrings: {
toggleThumbnails: 'Toggle thumbnails',
} as ThumbnailStrings,
Expand Down
31 changes: 30 additions & 1 deletion src/plugins/thumbnail/lg-thumbnail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,23 @@ export default class Thumbnail {
private thumbClickable = false;
private settings!: ThumbnailsSettings;
private $LG!: LgQuery;

private observer: IntersectionObserver;

constructor(instance: LightGallery, $LG: LgQuery) {
// get lightGallery core plugin instance
this.core = instance;
this.$LG = $LG;
this.observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
const lazyImage = <HTMLImageElement>entry.target;
lazyImage.src = <string>lazyImage.dataset.src;
lazyImage.classList.remove("lg-lazy-thumb");
observer.unobserve(lazyImage);
}
});
});

return this;
}
Expand Down Expand Up @@ -435,7 +448,16 @@ export default class Thumbnail {
const img = document.createElement('img');
img.alt = alt || '';
img.setAttribute('data-lg-item-id', index + '');
img.src = thumbImg;

if (this.settings.thumbnailLazyLoad) {
let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC";
img.className = "lg-lazy-thumb";
img.setAttribute('data-src', thumbImg);
img.src = placeholder;
} else {
img.src = thumbImg;
}
Comment on lines +452 to +459
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix formatting and const usage issues.

The lazy loading logic is correct, but address these static analysis issues:

-        if (this.settings.thumbnailLazyLoad) {
-            let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC";
-            img.className = "lg-lazy-thumb";
+        if (this.settings.thumbnailLazyLoad) {
+            const placeholder =
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC';
+            img.className = 'lg-lazy-thumb';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (this.settings.thumbnailLazyLoad) {
let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC";
img.className = "lg-lazy-thumb";
img.setAttribute('data-src', thumbImg);
img.src = placeholder;
} else {
img.src = thumbImg;
}
if (this.settings.thumbnailLazyLoad) {
const placeholder =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC';
img.className = 'lg-lazy-thumb';
img.setAttribute('data-src', thumbImg);
img.src = placeholder;
} else {
img.src = thumbImg;
}
🧰 Tools
🪛 ESLint

[error] 453-453: 'placeholder' is never reassigned. Use 'const' instead.

(prefer-const)

[error] 453-453: Replace ·"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" with ⏎················'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC'

(prettier/prettier)

[error] 454-454: Replace "lg-lazy-thumb" with 'lg-lazy-thumb'

(prettier/prettier)

🤖 Prompt for AI Agents 
In src/plugins/thumbnail/lg-thumbnail.ts around lines 452 to 459, replace the
mutable variable 'placeholder' with a 'const' since its value does not change,
and fix any inconsistent indentation or spacing to improve code formatting.
Ensure the assignment of className, attributes, and src properties follows
consistent style conventions.


div.appendChild(img);
return div;
}
Expand All @@ -444,6 +466,13 @@ export default class Thumbnail {
for (let i = 0; i < items.length; i++) {
const thumb = this.getThumbHtml(items[i].thumb, i, items[i].alt);
this.$lgThumb.append(thumb);

if (this.settings.thumbnailLazyLoad) {
const thumbImg = thumb.querySelector('img.lg-lazy-thumb');
if (thumbImg != null) {
this.observer.observe(thumbImg);
}
}
}
}

Expand Down