simpleintersectionobserver v1.0.5
SimpleIntersectionObserver
This package makes lazy loading, animations and everything else you normally do with IntersectionObserver easier.
Simple usage
import simpleIntersectionObserver from 'SimpleIntersectionObserver'
simpleIntersectionObserver(document.getElementsByClassName('lazy'), element => {
console.log(element, "is now visible!")
})
Why you'd want to use this
Let's take a look at a simple lazy loading example using IntersectionObserver.
const targets = document.getElementsByClassName("lazy")
targets.forEach(target => {
const io = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting){
const element = entry.target
const source = element.getAttribute("data-lazy-src")
element.setAttribute("src", source)
observer.disconnect()
}
})
})
io.observe(target)
})
That's a lot of code considering all we're really doing is asking to be notified when each element appears on the screen. The only lines that actually need to be there are
const targets = document.getElementsByClassName("lazy")
and
const source = element.getAttribute("data-lazy-src")
element.setAttribute("src", source)
Everything else is just annoying boilerplate that you have to deal with each and every time you use IntersectionObserver.
Let's rewrite that example using this package.
simpleIntersectionObserver(document.getElementsByClassName('lazy'), element => {
const source = element.getAttribute("data-lazy-src")
element.setAttribute("src", source)
})
Voilà! Now we're only writing the code that really matters, avoiding the boilerplate.
Passing options
You can pass options directly to IntersectionObserver as the 3rd argument
simpleIntersectionObserver(elements, callback, {rootMargin: "20%", threshold: .1})
Advanced IntersectionObserver usage
This package is meant for simple use cases. If you're doing something more complicated (eg. doing viewport calculations based on entries), this package isn't for you.