Enhance lazy loading for backgrounds

e39eec2c6fbd20273d63536b22a27ff67d55fa13

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/backgrounds.js+26 -14 Viewed

     lazyLoadObserver = new IntersectionObserver((entries, observer) => {
         entries.forEach(entry => {
             if (entry.target instanceof HTMLElement && entry.isIntersecting) {
                 const imageUrltarget = entry.target.dataset.bgSrc;
 -                if (imageUrl) {
 +                const bg = target.getAttribute('bgfile');
 -                    entry.target.style.backgroundImage = `url('${imageUrl}')`;
 +                const isCustom = target.getAttribute('custom') === 'true';
 -                }
 +                resolveImageUrl(bg, isCustom)
 -                entry.target.classList.remove('lazy-load-background');
 +                    .then(url => { target.style.backgroundImage = url; })
 -                observer.unobserve(entry.target);
 +                    .catch(() => { target.style.backgroundImage = PLACEHOLDER_IMAGE; });
 +                target.classList.remove('lazy-load-background');
 +                observer.unobserve(target);
+            }
         });
     }, options);

+}
 /**
 + * Resolves the image URL for the background.
 + * @param {string} bg Background file name
 + * @param {boolean} isCustom Is a custom background
 + * @returns {Promise<string>} CSS URL of the background
 + */
 +async function resolveImageUrl(bg, isCustom) {
 +    const fileExtension = bg.split('.').pop().toLowerCase();
 +    const isAnimated = ['mp4', 'webp'].includes(fileExtension);
 +    const thumbnailUrl = isAnimated && !background_settings.animation
 +        ? await getThumbnailFromStorage(bg)
 +        : isCustom
 +            ? bg
 +            : getThumbnailUrl('bg', bg);
++
 +    return `url('${thumbnailUrl}')`;
 +}
++
 +/**
  * Instantiates a background template
  * @param {string} bg Path to background
  * @param {boolean} isCustom Whether the background is custom

     const url = generateUrlParameter(bg, isCustom);
     const title = isCustom ? bg.split('/').pop() : bg;
     const friendlyTitle = title.slice(0, title.lastIndexOf('.'));
 -    const fileExtension = bg.split('.').pop().toLowerCase();
 -    const isAnimated = ['mp4', 'webp'].includes(fileExtension);
 -    const thumbnailUrl = isAnimated && !background_settings.animation
 -        ? await getThumbnailFromStorage(bg)
 -        : isCustom
 -            ? bg
 -            : getThumbnailUrl('bg', bg);
     template.attr('title', title);
     template.attr('bgfile', bg);
     template.attr('custom', String(isCustom));
     template.data('url', url);
 -    template.attr('data-bg-src', thumbnailUrl);
     template.addClass('lazy-load-background');
     template.css('background-image', PLACEHOLDER_IMAGE);
     template.find('.BGSampleTitle').text(friendlyTitle);