python-gallery/gallery/templates/index.html

{% extends 'layout.html' %}

{% block header %}
    <img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}

{% block content %}
    <div class="app">
        <h1>Gallery</h1>
        <div id="gallery" class="gallery">
            {% for image in images %}
                <a class="gallery__item" href="/image/{{ image['id'] }}">
                    <div class="gallery__item-info">
                        <p>{{ image['id'] }}</p>
                        <h2>{{ image['file_name'] }}</h2>
                    </div>
                    <span class="gallery__item-filter"></span>
                    <img class="gallery__item-image" src="/uploads/original/{{ image['file_name'] }}" onload="imgFade(this)" style="display:none;">
                </a>
            {% endfor %}
        </div>
    </div>
    <script>
        let imageList = [];
        let imageIndex = 0;
        
        function loadMore(startIndex, amount = 20) {
            for (let i = startIndex; i < startIndex + amount; i++) {
                if (i < imageList.length) {
                    loadImg(imageList[i][0], imageList[i][1]);
                }
            }
            imageIndex = startIndex + amount;
        }

        function loadImg(id, fileName) {
            var imgDiv = `
                <a class="gallery__item" href="/image/${id}">
                    <div class="gallery__item-info">
                        <p>${id}</p>\
                        <h2>${fileName}</h2>
                    </div>
                    <span class="gallery__item-filter"></span>
                    <img class="gallery__item-image" src="https://supersecreteuploadtest.leggy.dev/usr/images/${fileName}" onload="imgFade(this)" style="display:none;">
                </a>
                `;

            $(imgDiv).hide().appendTo('#gallery').fadeIn(250);
        }

        $.ajax({
            url: '/fileList/original',
            type: 'get',
            success: function(response) {
                imageList = response;
                loadMore(0, 30);
            }
        });

        $(window).scroll(function() {
            if ($(window).height() + $(window).scrollTop() >= $(document).height() - 500) {
                loadMore(imageIndex);
            }
        });
    </script>
{% endblock %}