How to show multiple items when scrolling down?

Question

JavaScript

Good afternoon!

There is a page with a lot of photos arranged in a grid.

<div class="item">
  <div class="image">
    <img src="1.jpg" alt=""/>
  </div>
</div>
..и т.д.

There can be many photos (say, a thousand), and it is not always necessary for the user (and browser) to download them all.
I assume that a certain number of photos (for example, 100) will always be loaded, and the rest will be opened in blocks of 50 pieces when the user scrolls to them.
I'm just not sure how to implement it.
I ask for hints.

Answer 1

Lazy loading of images
You connect after jQuery - https://raw.githubusercontent.com/ressio/lazy-load...
And for images instead of src="path to image" you prescribe data-src="path to image"

Answer 2

lazyload google.