Hello. This is the first time I’m doing this. Tell me if everything is correct.
Using the http article https://imagekit.io/blog/lazy-loading-images-complete-guide/
js is connected at the bottom of the page
<script src="/assets/2022/js/lazy/lazy.js"></script>
contains:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})
<div id="bg-image" class="bg-layer-1 lazy" style="background-image: url(/assets/2022/images/column-bg-1.jpg);"></div>
<div id="bg-image" class="bg-layer-2 lazy" style="background-image: url(/assets/2022/images/column-bg-2.jpg);"></div>
based on the article, I check in the console. How can I understand that there should be no images - if everything is correct?