File size: 3,614 Bytes
560ee81 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | @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>
|