From 55da852d2481163602584bc6496d0d078bef1ba8 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Thu, 31 Oct 2024 12:07:30 +0100 Subject: [PATCH] s --- gallery.html | 82 ++++++++++++++++++++++++----------------------- js/lazyloading.js | 20 ++++++++++++ 2 files changed, 62 insertions(+), 40 deletions(-) create mode 100644 js/lazyloading.js diff --git a/gallery.html b/gallery.html index 4cc8cf8..e9649e2 100644 --- a/gallery.html +++ b/gallery.html @@ -10,48 +10,50 @@ Car Meet Gallery - +
- a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here - a car immage is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here + a car image is supposed to be here
+ + \ No newline at end of file diff --git a/js/lazyloading.js b/js/lazyloading.js new file mode 100644 index 0000000..8a7fbf6 --- /dev/null +++ b/js/lazyloading.js @@ -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); \ No newline at end of file