class Media {
|
constructor() {
|
this.currentWidth = window.innerWidth;
|
this.images = document.querySelectorAll('.wp-site-blocks img[data-small]');
|
|
if (this.images.length === 0) return;
|
|
// Immediately load visible images
|
this.loadVisibleImages();
|
|
this.initListeners();
|
}
|
|
loadVisibleImages() {
|
// Load first image immediately, plus any in viewport
|
this.images.forEach((img, index) => {
|
const rect = img.getBoundingClientRect();
|
const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
|
|
// Always load first image, or if currently visible
|
if (index === 0 || isVisible) {
|
this.loadAppropriateImage(img);
|
img.dataset.loaded = 'true'; // Mark so we don't observe it
|
}
|
});
|
}
|
|
initListeners() {
|
this.resizeHandler = this.handleResize.bind(this);
|
window.addEventListener('resize', this.resizeHandler);
|
|
// Only observe images that weren't immediately loaded
|
this.observer = new IntersectionObserver((entries) => {
|
entries.forEach(entry => {
|
if (entry.isIntersecting) {
|
this.loadAppropriateImage(entry.target);
|
this.observer.unobserve(entry.target);
|
}
|
});
|
}, {
|
rootMargin: '50px',
|
threshold: 0.1
|
});
|
|
this.images.forEach(img => {
|
if (!img.dataset.loaded) {
|
this.observer.observe(img);
|
}
|
});
|
}
|
|
handleResize() {
|
window.debouncer.schedule('image-resize', () => {
|
const newWidth = window.innerWidth;
|
if (Math.abs(newWidth - this.currentWidth) > 100) {
|
this.currentWidth = newWidth;
|
this.updateVisibleImages();
|
}
|
}, 150);
|
}
|
|
updateVisibleImages() {
|
this.images.forEach(img => {
|
const rect = img.getBoundingClientRect();
|
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
this.loadAppropriateImage(img, true);
|
}
|
});
|
}
|
|
loadAppropriateImage(img, forceUpdate = false) {
|
const targetSize = this.getTargetSize();
|
const newSrc = img.dataset[targetSize];
|
|
if (newSrc && (forceUpdate || newSrc !== img.currentSrc)) {
|
img.src = newSrc;
|
}
|
}
|
|
getTargetSize() {
|
if (this.currentWidth < 768) return 'small';
|
if (this.currentWidth < 1200) return 'medium';
|
return 'full';
|
}
|
|
cleanup() {
|
this.observer?.disconnect();
|
window.removeEventListener('resize', this.resizeHandler);
|
}
|
}
|
|
window.isLoaded = false;
|
document.addEventListener('readystatechange', () => {
|
if (!window.isLoaded && document.querySelector('.wp-site-blocks img')) {
|
window.jvbMedia = new Media();
|
window.isLoaded = true;
|
}
|
});
|
