@foreach($relations as $relation)
    <a href="{{ route('comic-info', [$relation->slug, convertComicIdtoString($relation->id)]) }}" class="skeleton-loader comic">
        <div class="skeleton-bg-content"
             style="background:{{ $relation->skeleton_bg_color }}"></div>
        <div class="skeleton-tranfer-bg" style="{{ $relation->tranfer_color }}">
        </div>
        <picture class="bg-content-comic">
            <img
				referrerpolicy="no-referrer"
                class="lazyload"
{{--                src="{!! $relation->link_bg?getLinkSpinImg():'' !!}"--}}
                data-src="{!! $relation->link_bg !!}"
                alt="">
        </picture>
        <picture class="comic-avatar">
            <img
			referrerpolicy="no-referrer"
                class="lazyload"
{{--                src="{!! $relation->link_avatar?getLinkSpinImg():'' !!}"--}}
                data-src="{!! $relation->link_avatar !!}"
                alt="">
        </picture>
        <div class="tranfer-comic"
             style="{{ $relation->tranfer_color }}">
        </div>
        <div class="comic-name">
            <img
			referrerpolicy="no-referrer"
                class="lazyload"
{{--                src="{!! $relation->link_comic_small_name?getLinkSpinImg():'' !!}"--}}
                data-src="{!! $relation->link_comic_small_name !!}"
                alt="">
        </div>


{{--        <div class="extend-info">--}}
{{--            <span class="label-free-span bg-color-yellow"> miễn phí</span>--}}
{{--        </div>--}}
    </a>
@endforeach

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let lazyImageObserver;
        lazyImageObserver = new IntersectionObserver(function (entries, observer) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    try {
                        let lazyImage = entry.target;
                        let lazyImages = lazyImage.querySelectorAll('img[class^=lazyload]')
                        let loadedImages = 0;
                        lazyImages.forEach(item => {
                            item.src = item.dataset.src;
                            item.removeAttribute('data-src');
                            item.addEventListener('load', (inner) => {
                                loadedImages++;
                                if (loadedImages === lazyImages.length) {
                                    let bg_content = lazyImage.querySelector('div[class="skeleton-bg-content"]')
                                    let tranfer_anchor = lazyImage.querySelector('div[class="skeleton-tranfer-bg"]')
                                    lazyImage.removeChild(bg_content)
                                    lazyImage.removeChild(tranfer_anchor)

                                    lazyImage.classList.remove("skeleton-loader");

                                }
                            });
                        })
                        lazyImageObserver.unobserve(lazyImage);
                    } catch (e) {

                    }

                }
            });
        }, {
            root: null, // Quan sát theo viewport
            rootMargin: '0px', // Không có margin xung quanh phần tử gốc
            threshold: 0.1 // Kích hoạt sự kiện khi phần tử hiển thị ít nhất 10% trong vùng nhìn thấy
        });

        let imgs = document.querySelectorAll('.image-list a[class^=skeleton-loader]')
        imgs.forEach((item) => {
            lazyImageObserver.observe(item);
        })

    });
</script>