alvin/carsite
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/carsite.git synced 2026-03-07 05:45:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
vista-man
2024-10-31 12:07:30 +01:00
parent 4af21c1f8d
commit 55da852d24
2 changed files with 62 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
gallery.html
View File

@@ -12,46 +12,48 @@
<body> <body>
<article class="gallery"> <article class="gallery">
<img src="media/1.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/1.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/2.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/2.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/10.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/10.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/4.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/4.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/5.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/5.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/6.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/6.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/7.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/7.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/8.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/8.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/9.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/9.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/26.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/26.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/3.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/3.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/11.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/11.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/12.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/12.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/13.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/13.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/14.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/14.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/15.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/15.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/16.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/16.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/17.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/17.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/18.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/18.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/19.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/19.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/20.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/20.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/21.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/21.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/22.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/22.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/23.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/23.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/24.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/24.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/25.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/25.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/27.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/27.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/28.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/28.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/29.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/29.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/30.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/30.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/31.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/31.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/32.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/32.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/33.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/33.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/34.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/34.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/35.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/35.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/36.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/36.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/37.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/37.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/38.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/38.jpg" class="lazy" alt="a car image is supposed to be here">
<img src="media/39.jpg" alt="a car immage is supposed to be here" /> <img data-src="media/39.jpg" class="lazy" alt="a car image is supposed to be here">
</article> </article>
<script src="js/lazyloading.js"></script>
</body> </body>
</html> </html>

20
js/lazyloading.js Normal file
View File

@@ -0,0 +1,20 @@
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
observer.unobserve(lazyImage);
}
});
});
lazyImages.forEach((lazyImage) => {
observer.observe(lazyImage);
});
}
window.addEventListener('load', lazyLoad);