I have an HTML page where I arranged 6 cards using a CSS grid. I want them to lazy load those cards using Intersection Observer. At a first glance, people will see only two or three cards in a row according to the viewport width, after scrolling down people will see a total of 6 cards. Suppose I have 40 cards. What if I want to load only 6 cards at first and the rest of the card only when the user scrolls. I tried to implement this but failed. Can anyone help me to achieve this? Here is my GitHub repository link
Asked
Active
Viewed 117 times
0
-
I have created this plugin that uses the intersection observer api - https://github.com/maxshuty/simply-lazy take a look at my `SimplyLazy.js` file and it should help you out – maxshuty Apr 08 '21 at 11:31
-
is this plugin only for images? – Shahab 570 Apr 08 '21 at 12:43
-
Anything that uses the `src` tag, but you might be able to extract some logic from it – maxshuty Apr 08 '21 at 15:18