mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-22 21:57:49 +01:00
add lazy loading :^
This commit is contained in:
parent
aeedfd20b3
commit
19146f371e
1 changed files with 29 additions and 0 deletions
|
@ -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);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<% if (!optout) { %>
|
||||
|
|
Loading…
Reference in a new issue