feat(frontend): replace lazy loading with zibll lazysizes
This commit is contained in:
1 parent
02571eecd6
commit
435ee1daa7
78 files changed
+1515
-909
No files matched your search
@@ -226,53 +226,6 @@
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function hydrateLazyImages(scope) {
|
||||
var lazyImages = (scope || document).querySelectorAll('img.aksrt-lazy');
|
||||
if (!lazyImages.length) return;
|
||||
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
lazyImages.forEach(function (img) {
|
||||
var src = img.dataset.src;
|
||||
if (src) {
|
||||
img.src = src;
|
||||
img.classList.remove('aksrt-lazy');
|
||||
img.classList.add('aksrt-loaded');
|
||||
}
|
||||
var skeleton = img.previousElementSibling;
|
||||
if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var observer = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
var img = entry.target;
|
||||
var src = img.dataset.src;
|
||||
if (!src) { observer.unobserve(img); return; }
|
||||
|
||||
var tempImg = new Image();
|
||||
tempImg.onload = function () {
|
||||
img.src = src;
|
||||
img.classList.remove('aksrt-lazy');
|
||||
img.classList.add('aksrt-loaded');
|
||||
var skeleton = img.previousElementSibling;
|
||||
if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
|
||||
};
|
||||
tempImg.onerror = function () {
|
||||
img.classList.remove('aksrt-lazy');
|
||||
img.classList.add('aksrt-error');
|
||||
var skeleton = img.previousElementSibling;
|
||||
if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
|
||||
};
|
||||
tempImg.src = src;
|
||||
observer.unobserve(img);
|
||||
});
|
||||
}, { rootMargin: '200px 0px', threshold: 0.01 });
|
||||
|
||||
lazyImages.forEach(function (img) { observer.observe(img); });
|
||||
}
|
||||
|
||||
/**
|
||||
* Hydrate a panel after AJAX content injection.
|
||||
* Sets data-view, re-binds lazy images, and dispatches events.
|
||||
@@ -285,7 +238,6 @@
|
||||
postsContainer.setAttribute('data-view', viewMode || getDefaultView());
|
||||
}
|
||||
|
||||
hydrateLazyImages(panel);
|
||||
dispatchRenderedEvent(panel, {
|
||||
viewMode: viewMode || getDefaultView(),
|
||||
panel: panel.getAttribute('data-home-tab-panel') || ''
|
||||
|
||||
Reference in new issue
Block a user