max/silvester-23
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: fade in lazy loaded images

Browse Source
This commit is contained in:
max_richter 2023-11-20 16:16:23 +01:00
parent c7914b3d30
commit cac3856de4
3 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -19,6 +19,8 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script src="/lazy.js"/>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>

27
src/routes/global.css
View File

@ -9,14 +9,23 @@
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background-size: 80%;
height: 100%;
margin: 0;
padding: 0;
background-size: 80%;
}
html {
background: black;
background-image: url(/pattern_b.jpg);
backdrop-filter: brightness(0.3);
}
html {
background: black;
background-image: url(/pattern_b.jpg);
backdrop-filter: brightness(0.3);
}
img.lazy-image {
opacity: 0;
transition: opacity 0.3s ease;
}
img.lazy-image.loaded {
opacity: 1;
}

13
static/lazy.js Normal file
View File

@ -0,0 +1,13 @@
window.onload = function(){
var lazyImages = [...document.querySelectorAll("img[loading='lazy']")];
for (let i = 0; i < lazyImages.length; i++) {
var element = lazyImages[i];
element.classList.add("lazy-image")
element.addEventListener("load", function(){
element.classList.add("loaded");
})
}
}