From f0b3592be62b998b42424bd32d7c0872a0bb1e2c Mon Sep 17 00:00:00 2001 From: Ashley Date: Sun, 26 Feb 2023 20:56:33 +0000 Subject: [PATCH] add lazy loading :^ --- html/poketube.ejs | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/html/poketube.ejs b/html/poketube.ejs index 8226e5ef..6851d744 100644 --- a/html/poketube.ejs +++ b/html/poketube.ejs @@ -1267,6 +1267,35 @@ window.addEventListener("load", () => { progressContainer1.style.display = 'none'; }, 500); }); + + document.addEventListener('DOMContentLoaded', function() { + let bgs = document.querySelectorAll('[data-bg]'); + let bgCount = bgs.length; + + function loadBg(index) { + let bg = bgs[index]; + let bgUrl = bg.getAttribute('data-bg'); + bg.style.backgroundImage = `url(${bgUrl})`; + bg.removeAttribute('data-bg'); + bg.classList.add('loaded'); + } + + function lazyLoadBg() { + for (let i = 0; i < bgCount; i++) { + let bg = bgs[i]; + let bgRect = bg.getBoundingClientRect(); + if (bgRect.top < window.innerHeight && bgRect.bottom > 0) { + loadBg(i); + } + } + } + + lazyLoadBg(); + + window.addEventListener('scroll', lazyLoadBg); + window.addEventListener('resize', lazyLoadBg); +}); + <% if (!optout) { %>