Add UHD Lazyload

Add btn class
Dieser Commit ist enthalten in:
Chaoscaot 2022-08-01 23:28:04 +02:00
Ursprung 465c763bcb
Commit 31582a64b8
3 geänderte Dateien mit 28 neuen und 4 gelöschten Zeilen

13
app.js Normale Datei
Datei anzeigen

@ -0,0 +1,13 @@
if(window.innerWidth > 1200) {
let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
let image = images[i];
// Lazy load UHD images
image.onload = () => {
if(image.src.includes("-1080P")) {
image.src = image.src.replace("-1080P", "-UHD");
}
}
}
}

Datei anzeigen

@ -30,6 +30,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="app.js" defer></script>
</head>
<body>
@ -125,7 +127,7 @@
<h3>Bauhilfen</h3>
<h4 id="smartplace">Smartplace</h4>
<img src="Smartplace-1080P.png" alt=""><br>
<img src="Smartplace-1080P.png" alt="" loading="lazy"><br>
<p>
Smartplace kann mit <code>/smartplace</code> aktiviert und deaktiviert werden. Dies wird für dich auf allen Baus
umgestellt. Wenn du nun rotierbare Blöcke wie Pistons, Observer und andere platzieren willst, werden diese wenn man
@ -133,6 +135,8 @@
dafür kein sneaken mehr.
</p>
<a class="btn">Zum Code</a>
<h3>TNT Handling</h3>
<h4>Loader</h4>
</div>

Datei anzeigen

@ -1,8 +1,7 @@
/*
html {
/* Scrolls for me */
scroll-behavior: smooth;
}
*/
details {
cursor: pointer;
@ -67,3 +66,11 @@ a {
color: black;
text-decoration: none;
}
.btn {
padding: .5rem 1rem;
background: rgb(0, 108, 255);
cursor: pointer;
border: rgba(0, 0, 0, 0.1) solid 1px;
border-radius: .3rem;
}