Create an Infinite Scroll | Lazy Loading Page

This tutorial explains how you can easily create your own lazy loading page or infinite scrolling page with JavaScript and the Intersection Observer API.
Intro to InterSectionObserver video: • IntersectionObserver API
Sample Code GIST: gist.github.com/prof3ssorSt3v...

[@iwswordpress]

awesome! Thanks for introducing things I would not know existed.

[@Suneriins234]

I love to watch your videos.Fantastic understanding!

[@gladstonross12]

Just another reason why keep going.. Love your vids

[@frankgute4456]

Just wow. You are professional please keep give us something wonderful like this . big heart from germany

[@supa1009]

elegant solution. thanks steve!

[@CarloNyte]

So freaking helpful! Thank you!!

[@MicahJohns]

Would be awesome to see a version of this that extracts the data from a MYSQLI database, regardless.. thank you for making this.

[@benvance3716]

I guess Im asking the wrong place but does anyone know a trick to get back into an Instagram account?? I was dumb forgot the login password. I would love any tricks you can give me

[@shepardgrey6618]

@Ben Vance instablaster =)

[@benvance3716]

@Shepard Grey I really appreciate your reply. I got to the site thru google and im waiting for the hacking stuff atm. I see it takes a while so I will reply here later when my account password hopefully is recovered.

[@benvance3716]

@Shepard Grey It worked and I actually got access to my account again. I'm so happy! Thank you so much you saved my ass!

[@shepardgrey6618]

@Ben Vance glad I could help :D

[@FordExplorer-rm6ew]

Can you have 2 intersection observers? I have one that observes section tags and places a bubble of the same color over my nav links. Are there cases where people use two? Or would you just pass another function in before options?

[@SteveGriffith-Prof3ssorSt3v3]

It would be more efficient to put all the functionality inside one function if possible.

[@shinej11]

Hi Steve, thank you for sharing this. I love your videos :) I am trying to implement this on a table to load rows as you scroll. I tried setting the target as '#myTable tr:last-child'. It is getting triggered and loading contents, however not working as expected. Would you have any suggestions? thank you

[@SteveGriffith-Prof3ssorSt3v3]

Without knowing what it is doing I can't really say. Are you adding a new row or just adding more content to the existing last row?

[@shinej11]

@@SteveGriffith-Prof3ssorSt3v3 I've got a table with more than 500 rows; data obtained from API in JSON format. I am working on my first PWA. Loading all the rows at first is affecting the performance of the app. Any suggestions? Thank you for replying, Steve :)

[@SteveGriffith-Prof3ssorSt3v3]

500 objects is not a lot of data. The performance is likely being impacted by rendering that many rows. You can get the data with one fetch and then add them in chunks as the user scrolls.

[@shinej11]

@@SteveGriffith-Prof3ssorSt3v3 Thank you, Steve :) Appreciate it

[@andrewtanjaya8263]

I dont understand about how you can limit your getdata function to get data until the footer is intersecting, mine it will fetch all data at once

[@SteveGriffith-Prof3ssorSt3v3]

Each of my fetch calls gets another copy of the same json file. I am not limited the results from that JSON file. I am just adding more copies of the same data. To be able to limit you need to be calling an API that allows for limiting and paging of results. That is server-side functionality though.

[@GuitaristZep]

This still detects an element that has a property of "display:none" or is within a parent element with a property of "display:none". Can you help me solve this problem?

[@BottomTheoryTV]

I'm trying to fetch photos from my documents folder but it's not working. Can you help pleases?

[@SteveGriffith-Prof3ssorSt3v3]

You can't "fetch" from local files. Security restrictions.

[@XXX-nd2zz]

Should we also consider about recycling some nodes as the scroll grows bigger?

[@SteveGriffith-Prof3ssorSt3v3]

When working with an infinite scroll situation you always need to consider how much data COULD get loaded. If you are using the Lighthouse tools in Chrome to test your page then you will get warnings about excessive DOM size if you exceed: - over 1,500 DOM nodes in total - a maximum node-depth greater than 32 nodes - greater than 60 child nodes exist in a single branch. This last one pertains to infinite scrolling the most. Now, obviously an infinite scrolling page is likely to exceed 60 new items added as the user scrolls. However, the impact of that will vary GREATLY depending on the device loading the resources. The new upcoming media query prefers-reduced-data is something to consider using to limit infinite scrolling. You can definitely use JS to remove elements from the top as you scroll down and vice-versa while scrolling up. Just a matter of managing a single source of truth for the data and tying in to your scrolling to load and unload. A good recycler view is a lot of work though. Here is a good article about it - developers.google.com/web/updates/2016/07/infinite-scroller

[@XXX-nd2zz]

@@SteveGriffith-Prof3ssorSt3v3 omg!! thanks for the reply and I didn't expect your quick response ☺!! subscribed!!

[@coderdoctor]

Sir thanks for this content😃

[@ramisanawar9697]

Sir. After log in fb with javascript or python or php or any other sources is it possible to speedly or rapidly scroll down into a fb group? I need to copy all posts and comments of a group at very short time.

[@SteveGriffith-Prof3ssorSt3v3]

They only load a few at a time for better performance. Maybe if you look into the FB API you can find methods to do that

[@kirillbaryba746]

Hi Steve, you have a video how to implement ajax pagination, how to do it correctly? Thanks

[@SteveGriffith-Prof3ssorSt3v3]

No I dont yet. Please add that to my tutorial request video comments

[@fsbgaming1588]

@@SteveGriffith-Prof3ssorSt3v3 so if this used for paging the problem is when the paging end. its still fetching... how to stop it.

[@SteveGriffith-Prof3ssorSt3v3]

@@fsbgaming1588 You need to have information from the server about how many records are coming back or if it is the last page. OR if you get an empty record set from the server then you can stop doing the fetch.

[@mulindierick195]

how do I do this if I am loading the images from a database? Let's say the images are posts by a user. How do I implement this?

[@SteveGriffith-Prof3ssorSt3v3]

The same way. You will just be making ajax calls to a serverside script that returns more image urls or more html

[@mulindierick195]

@@SteveGriffith-Prof3ssorSt3v3 thank you, Let me try this

[@Ayua1]

Hello Steve, please does this work well on mobile phones browsers. I have an issue with loading more content on my website. It works well on desktop browsers but doesn't work on mobile phone browsers except for Safari.

[@SteveGriffith-Prof3ssorSt3v3]

If you are on iOS, Apple requires all browsers to use the safari webkit engine. If it works on Safari then the script should run on all browsers on iOS.

[@mustafaneto26]

Hello Steve, this works really well here, but if I go to another link and return It breaks, do you know what problem should it be?

[@SteveGriffith-Prof3ssorSt3v3]

I'm not having that problem. What part is breaking exactly? Are there error messages in the console?

[@kathirvelv7798]

How can we handled the large list of data and DOM?

[@SteveGriffith-Prof3ssorSt3v3]

We should be fetching small amounts of data and adding that to the DOM. As for the size of the page that is only limited by the amount of memory available in the device.

[@zroot]

Hi Steve, Thanks for sharing. Its seems essay, you have a array of 4 objects and you fetch them again and again. But I have a array of 200 objects. How can I fetch first 4 objects, then first 4 objects with second 4 objects and then first, second and third 4 objects. and so on.. I'm a little noob to JavaScript, so please describe a little wordily. Thank you

[@SteveGriffith-Prof3ssorSt3v3]

The 4 objects that I am loading over and over is just a place holder for the real version that would be using fetch( ) to get the hundreds of items. I have a playlist about AJAX and fetch that explains everything you need to know about getting data from a remote source to load on to a page.

[@zroot]

@@SteveGriffith-Prof3ssorSt3v3 Thank you again. I watch all of the video on that playlist. It gives me a lot of knowledge about fetch and other stuff. But i didn't get what I'm looking for.. Didn't find any suitable video about How can I fetch first 4 objects, then first 4 objects with second 4 objects and then first, second and third 4 objects. and so on..

[@GuitaristZep]

@@SteveGriffith-Prof3ssorSt3v3 I think he is talking about setting and using the offset for the lazyload because it is not discussed here sir

[@YouCodeRK]

If an API supports pagination then you can use query parameter for requesting only limited data from API and can calculate the prev loaded data and can request for next data on the basis of pageNo, itemsPerPage. check the documentation of the API used for pagination support

[@adhigeorgevlogs]

Ever faced an issue where it triggered the callback twice in safari?

[@SteveGriffith-Prof3ssorSt3v3]

The Intersection observer will be called potentially many many times in all browsers.

[@shyamtailor4762]

sir how get images from our system not internet

[@SteveGriffith-Prof3ssorSt3v3]

Sorry. Dont understand your question.

[@bautistadalisaymilenem.4722]

how can I insert my own images and captions?

[@SteveGriffith-Prof3ssorSt3v3]

Use fetch() to get the data from somewhere like your own data source. Then the content you build will be your own.

[@bautistadalisaymilenem.4722]

@@SteveGriffith-Prof3ssorSt3v3 thank you so much

[@semosemo3827]

why there is 3 images each line always ?

[@semosemo3827]

it's because 'grid-template-columns'

[@altonmazin]

how are you fetching only 4 elements?

[@SteveGriffith-Prof3ssorSt3v3]

There are only 4 in the JSON that I fetch - gist.githubusercontent.com/prof3ssorSt3v3/1944e7ba7ffb62fe771c51764f7977a4/raw/c58a342ab149fbbb9bb19c94e278d64702833270/infinite.json

[@ssyo5450]

please share me images JSON file

[@SteveGriffith-Prof3ssorSt3v3]

The URL for the JSON is in the code that is linked to in the description.

[@kaan9631]

Turkey yazıyor footerda as bayrakları as