Detect DOM Changes With The Intersection Observer API - JavaScript Tutorial

In today's video I'll be taking you through how to use the Intersection Observer API within JavaScript.

This API allows you to detect whenever a target HTML element becomes visible to the end user. This is useful for lazy loading images, only running animations or tasks when needed, or maybe even creating an infinite scroll website.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[sakshisrivastava]

One of the best videos that i found on youtube that explains Intersection Observer API this good!
Thank you :)

[Praveenkumar-vjgh]

I've seen 30% only and you have explained so well. Keep up

[anasimran-bh]

you nailed it! saw many tutorials but this was something like a tutorial. Keep going.

[artemkirkhmaier]

My native language is russian. And I tried to find explanations of IO in my language. But I couldn't.
I appreciate you know IO so well that you capable to explain with such details and examples. THank you a lot for sharing your knowledge with us.

[robelbenyam]

the way you explained it was so easy, better than the other videos ive seen, thanks a lot men.🤙

[rafalpotasz]

Best video on the topic, and i've watched quite a few of them by now. Cheers!

[nomadealex]

I don’t find a good content about this in my lange.
Thank you very much!

[jamesmassa]

Dom, I watch your videos all the time, they are a great resource. But I realized something interesting by accident.



The part in the video where you say I forgot to change the root… don’t change the root. : ) Leave it the way it is.

That is, the same way you have the example set up to that point, don’t make any changes.

Now go and scroll and see what happens. : )

[samirergaibi]

Great content mate, keep up the good work.

[noah_edwrds]

I'm really curious : where did you learn all this useful stuff ?
Love your vids, it increased my passion for coding. Keep it up !

[saife]

Love your videos .... you have Cleared my confusions 😘

[somethingprogrammed]

Thanks.. this video answered some questions i had. Loved it.

[EnglishRain]

Such s fantastic tutorial than you so much!

[SOUVIK_RAY_]

Great tutorial! Can you tell me how to ensure observer is not triggered on page load? I have a observer on top of the page. But on refresh it gets triggered. I only want it to be triggered when I scroll up to it.

[sneaky-Jay]

all nice and tidy but what to do when you have multiple elements on same row to observe for intersecting with the viewport?

[siddheshmandavkar]

How to stop observer and restart on change event? i am using this in lazy loading data table. but i want to show datatable all data once and lazy loaded data table on the basis of check box. so i just want to start intersection observer on page load then on checkbox checked stop that observer and on uncheck start that observer again.

[frncscbñz]

Is this how lazy loading images created? If not, do you have a video about lazy loading images? If also no, can you make one? 😁
Thanks. Thumbs up!

[iqronegoro]

Trying to make same system' with innerHeight. So if user reach end page Will include new page

and its fail

[shuttshotz]

This was really good.

Also just wanted to know if you tried the blutooth API? or Beacon API?
Its written experimental on the Documentation.

Just wanted to know your thoughts on it and will you be making a tutorial on that as there is litreally no tutorials on it

Thanks for all your hardwork :)

[tharakakarunarathne]

Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type