I wanted some help with JSON fetching using JS, I'm working a library of images and I have a locally present json file which includes over 5000+ entries of images name, size, color and etc for clothing articles. I was able to fetch the images by doing this,

JS

fetch("dataset_api.json")
    .then(function (data) {
        return data.json();
    })


    .then(function (data) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            var img = (data[i].images[1, 0, 2, 3].src)
            $(".app-right").append("<div class='grid' data-id= " + i + "> <img src=" + img + " class='imggrd' loading=lazy> </div>");
        }

Example of a json entry

dataset_api.json


color: "black"
desc: "Shirt by Sixth June"
gender: "male"
images: (4) [{…}, {…}, {…}, {…}]
retailPrice: 87
size: (4) ['S', 'M', 'L', 'XL']
title: "SHIRT"
url: "url"
..................

and append it in the HTML it self

..but the issue I'm facing right now is, I think the json has so many entries that It automatically converts them into batches of 100 so [0 to 99]

and so on, so If I want to get the next batch of images I have to change the value for " i " in the for loop in js to 99 or above to do that.

I was wondering if there is a way so that as soon as a user scroll to the bottom the JS automatically loads the next batch right after by the increment of 100. Also the main reason I'm not loading all the images at once is because it is really heavy for the machine to do so.

HTML

    <div class="app-right">
    </div>