As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing text. However, all my efforts result in a blank page. Furthermore, despite adding an "alert" function within the IntersectionObserver code, I was surprised to find that no message appeared.
Code:
/*eslint-env es6*/
/*eslint-env browser*/
const faders = document.querySelectorAll(".fade-in");
const sliders = document.querySelectorAll(".slide-in");
const appearOptions = {
threshold: 0,
rootMargin: "0px 0px -250px 0px"
};
const appearOnScroll = new IntersectionObserver(function(
entries,
appearOnScroll
) {
entries.forEach(entry => {
alert("error");
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add("appear");
appearOnScroll.unobserve(entry.target);
}
});
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
sliders.forEach(slider => {
appearOnScroll.observe(slider);
});.FadeIn{
opacity: 0;
transition: opacity 250ms ease-in;
}
.FadeIn.appear{
opacity: 1;
}<div class="FadeIn">
<h4> Some text .. </h4>
</div>
What could be the mistake in my approach? Any assistance would be greatly appreciated!