WordPress

{% for image in stocks %}
    <div class="stock_item_one file_container not_loaded" style="width:{{ image.thumbWidth}}px; height:{{image.thumbHeight}}px;">
        {% set src = loop.index < 15 ? asset('uploads/stock/'~ image.thumbName) : asset('/images/real-gif.gif') %}
        <img data-src="{{ asset('uploads/stock/'~ image.thumbName) }}" class="lzy_img" src="{{ src }}"  alt="">
        <a href="{{ path('image_details', {id:image.id}) }}" class="container_link">
            <span class="file_container_title">{{ image.title }}</span>
            <span class="file-container__actions">
                {% if image.licenceType == 'Right Managed' %}
                    {% if image.type.title == "video" %}
                        <button class="button-circle licence_type" title="License Type">RR</button>
                                            {% else %}
                        <button class="button-circle licence_type" title="License Type">RM</button>
                    {% endif %}
                                            {% else %}
                    <button class="button-circle licence_type" title="License Type">RF</button>
                {% endif %}
                                <button
                                        data-id="{{ image.id }}"
                                        data-thumb-url="{{ asset('uploads/stock/'~ image.thumbName) }}"
                                        data-name="{{ image.title }}"
                                        data-price="{{ image.price }}"
                                        data-small-price="{{ image.priceSmall }}"
                                        data-medium-price="{{ image.price }}"
                                        data-large-price="{{ image.priceLarge }}"
                                        data-exclusive-1-month="{{ image.price }}"
                                        data-exclusive-3-month="{{ image.price }}"
                                        data-exclusive-6-month="{{ image.price }}"
                                        data-exclusive-12-month="{{ image.price }}"
                                        data-exclusive-24-month="{{ image.price }}"
                                        data-has-exclusive="{{ image.isExclusive ?image.isExclusive : 0 }}"

                                        class="button-circle cart_btn view_image_details"
                                        onclick="window.location.href = '{{ path('image_details', {id:image.id}) }}';"
                                        title="Add to Shopping Cart"></button>
                                    <button class="button-circle view_btn" title="View More Details"></button>
                                </span>
        </a>
        <a data-fancybox data-caption="{{ image.title }}" href="{{ asset('uploads/stock/'~ image.previewName) }}" class="button_zoom"></a>
    </div>
{% else %}
    {#<div class="alert alert-success">Your search has no result</div>
    <p>No results found</p>#}
{% endfor %}

<script>
    (function () {

        const imageObserver = new IntersectionObserver((entries, imgObserver) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const lazyImage = entry.target;
                    //console.log("lazy loading ", lazyImage);
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lzy_img");
                    imgObserver.unobserve(lazyImage);
                }
            });

        });

        const arr = document.querySelectorAll('img.lzy_img');
        arr.forEach((v) => {
            imageObserver.observe(v);

        });
    })();
</script>