Есть у меня одна страница. На этой странице условно 100 картинок одинакового размера. При открытии страницы она долго грузится (это и понятно, 100 картинок). Так вот. Мне надо как-то крыть часть из них и показывать частями (скажем по 20) при прокрутке страницы. Называется это бесконечная загрузка, но весть код картинок храниться в одном файле, а не в БД.
Как я это вижу:
Пользователь открыл станицу
20 картинок - отображаются
20 картинок - скрытно
20 картинок - скрытно
20 картинок - скрытно
20 картинок - скрытно
Далее прокручивает вниз, остаётся примерно 100px до конца страницы и тут второй блок меняет свой класс с hidden на show. Далее прокручивает дальше и снова всё повторяется.
Примерный код:
<div class="show">
<img src="img/1.jpg" title="" alt="">
<img src="img/2.jpg" title="" alt="">
<img src="img/3.jpg" title="" alt="">
</div>
<div class="hidden">
<img src="img/4.jpg" title="" alt="">
<img src="img/5.jpg" title="" alt="">
<img src="img/6.jpg" title="" alt="">
</div>
<div class="hidden">
<img src="img/7.jpg" title="" alt="">
<img src="img/8.jpg" title="" alt="">
<img src="img/9.jpg" title="" alt="">
</div>
Прошу помочь в решении задачи.