12000 grid row loading


I have a grid of 12000 rows and 5 columns:

.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(12000, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;

They will all have the same dimension with a small thumbnail/image in it.
What do I need too let’s say load 50 first after 1 minute 100 more and so on till they all appear.

Or how do I efficiently load these, so the browser doesn’t get stuck.

It’s an experiment I want to try, so the why’s are not for now :smiley:

Thanks for any help!

hey @quintendewilde,

You can use lazy loading, one way is to use data-src instead of src then load the image in with javascript once the image is scrolled into view, here is an example lazy loading codepen

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.