Detect DOM Changes With The Intersection Observer API

Detect DOM Changes With The Intersection Observer API - JavaScript Tutorial

Рет қаралды 17,576

4 жыл бұрын

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:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozilla.org/en-US/d...
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

Пікірлер: 45

@sakshisrivastava2486 2 жыл бұрын

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

@robelbenyam7 Жыл бұрын

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

@Praveenkumar-vj8gh 2 жыл бұрын

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

@samirergaibi874 4 жыл бұрын

Great content mate, keep up the good work.

@rafalpotasz 3 жыл бұрын

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

@noah_ishappy 4 жыл бұрын

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

@somethingprogrammed426 4 жыл бұрын

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

@user-yx5pc4cq1m 11 ай бұрын

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

@collins4359 3 жыл бұрын

great one bro. clean explanation

@artemkirkhmaier484 2 жыл бұрын

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.

@nomadealex Жыл бұрын

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

@shuttshotz9114 4 жыл бұрын

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 :)

@jamesmassa1999 3 жыл бұрын

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. : )

@EnglishRain 3 жыл бұрын

Such s fantastic tutorial than you so much!

@saife2905 2 жыл бұрын

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

@testpurposeonly7084 3 жыл бұрын

very useful tutorial.thanks

@dcode-software 3 жыл бұрын

You're welcome

@braham.prakash 3 жыл бұрын

Very useful tutorial

@user-oi5oy6mq2y 9 ай бұрын

The only video which really helped

@siddheshmandavkar7541 3 жыл бұрын

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.

@sneaky-Jay 4 жыл бұрын

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

@fabiiic-ops8600 2 жыл бұрын

You do a foreach

@franciscoibaneziii9386 4 жыл бұрын

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!

@nerdiloo9863 4 жыл бұрын

What you're referring to is adding the 'loading' attribute to images, where you can set it to 'lazy', 'eager' or 'auto'.

@iqronegoro1538 2 жыл бұрын

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

@asemahmed549 2 жыл бұрын

thanks

@SOUVIK_RAY_ 3 жыл бұрын

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.

@dcode-software 3 жыл бұрын

I did Google this a while back and I believe it's simply by design

@SOUVIK_RAY_ 3 жыл бұрын

@@dcode-software Oh I see. I am facing another problem. For some reason my callback function gets called twice. I even changed the structure of my code to match yours but even then every time I scroll to the element, the callback function gets called twice. Any idea why?

@iqronegoro1538 2 жыл бұрын

@@SOUVIK_RAY_ for me its working with use if else statement. u can use properties of object in observe element. intersectionRatio.... like this : const callback = entries => { // entries here mean element on observing if (entries[0].intersectionRatio === 1) { //intersectionRatio is properties of element (like ts said. how much percentage element is visible on end user viewport. // if element is visible from top to bottom it will 1 (or 100%) and will exec this code //and use forEach instead index if u have more element for observe console.log(entries[0]) console.log(entries[0].intersectionRatio) }

@fabiiic-ops8600 2 жыл бұрын

Thank you very much for this Nice Tutorial now I understand this Topic much better. Can you do the Threshold Porperty when the elements have position: absolute; ? For me it doesnt work when I try with the threshold: 1 but it works when I do threshold: [0.5, 0.8], I also made the element bigger

@fabiiic-ops8600 2 жыл бұрын

Ok, So I noticed when you have Devtools Open it doesnt work, but when they are gone it works. Maaaaybe it could be that the dev tools cover something idk? Yeah I leave this here, maybe someone is having the same trouble

@iqronegoro1538 2 жыл бұрын

@@fabiiic-ops8600 my code working with observing box which position : absolute

@Nightflash28 3 жыл бұрын

Great tutorial, very informative and detailed! Just two pieces of feedback: It would be great to have seen an actual use case for that. You said in the tutorial that you couldn't think of one which honestly baffled me a little. Why not change the opacity of the box as it comes into the viewport, or adding any other sort of animation? Websites with these little touches of interactivity are getting pretty standard today so I thought it was weird you didn't even touch on the potential use cases of this API. Secondly: either please drink a glass of water before / while recording your videos or edit your audio, but the forced swallowing every other sentence is really hard to bear when listening to you with headphones.

@dcode-software 3 жыл бұрын

Appreciate that feedback! Thank you

@tharakakarunarathne2420 Жыл бұрын

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

@Kir_46 3 жыл бұрын

Would you tell me name of your theme please? Also, very nice tutorial.

@developedbynick 3 жыл бұрын

Search for dcode

@devraghu 4 жыл бұрын

can you make a video that how we implement this thing in mozilla firefox

@dcode-software 4 жыл бұрын

It'd be the same as Chrome

@devraghu 4 жыл бұрын

@@dcode-software no its not because i check in mozila documentation it is not supported it says this need to be done first but its not working dom.IntersectionObserver.enabled to true

@theartist8835 4 жыл бұрын

@@devraghu From version 55, it is supported , below that you gotta chnage the configurations for it to work

@nerdiloo9863 4 жыл бұрын

You could also you page offset