How to control native lazy loading of images in chrome?

Question

I want to lazily load images from a gallery component (this is an example and does not represent its full size in production):

<div class="gallery-card">
  <a href="#"><img src="../../images/1.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/2.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/3.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/4.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/5.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/6.jpg" loading="lazy"></a>
</div>

Problem is that chrome has a very high threshold of (in my case) 2600 or so pixels, for the images to be considered lazy. I really just want to show 6 images (in a 3x2 grid) during initial load and upon scroll down, load in the next 6 images.

When I set the height of the gallery component manually, 2 of 6 images get loaded lazily:

<div class="gallery-card" style="height: 3000px">
  <a href="#"><img src="../../images/1.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/2.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/3.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/4.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/5.jpg" loading="lazy"></a>
  <a href="#"><img src="../../images/6.jpg" loading="lazy"></a>
</div>

but in a gallery of this size there have to be 100 or so images until the lazy load is triggered.

Is there a way to tell chrome (and other major browsers) to initially load a batch of 6 images and lazily load the next batch upon scroll down?