144 lines
4.2 KiB
JavaScript
144 lines
4.2 KiB
JavaScript
(function() {
|
|
// Default configuration
|
|
var defaults = {
|
|
offsetBottom: 100, // Distance from bottom to start loading
|
|
showTime: 1100, // Transition duration (ms)
|
|
queueInterval: 200 // Time between showing successive images in queue
|
|
};
|
|
|
|
var observer;
|
|
var imageQueue = []; // Queue for images waiting to be shown
|
|
var isProcessingQueue = false;
|
|
|
|
function init(setting) {
|
|
// Merge settings
|
|
defaults = Object.assign({}, defaults, setting || {});
|
|
|
|
// Reset queue
|
|
imageQueue = [];
|
|
isProcessingQueue = false;
|
|
|
|
// Disconnect previous observer if exists (for PJAX)
|
|
if (observer) {
|
|
observer.disconnect();
|
|
observer = null;
|
|
}
|
|
|
|
// Check for IntersectionObserver support
|
|
if (!window.IntersectionObserver) {
|
|
loadAllImages();
|
|
return;
|
|
}
|
|
|
|
// Initialize IntersectionObserver
|
|
observer = new IntersectionObserver(function(entries, self) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
var img = entry.target;
|
|
|
|
// Add to queue instead of loading immediately
|
|
addToQueue(img);
|
|
|
|
// Stop observing this image once it's triggered
|
|
self.unobserve(img);
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: "0px 0px " + defaults.offsetBottom + "px 0px",
|
|
threshold: 0.01
|
|
});
|
|
|
|
observeImages();
|
|
}
|
|
|
|
function addToQueue(img) {
|
|
// Avoid duplicates
|
|
if (!imageQueue.includes(img)) {
|
|
imageQueue.push(img);
|
|
processQueue();
|
|
}
|
|
}
|
|
|
|
function processQueue() {
|
|
if (isProcessingQueue) return;
|
|
if (imageQueue.length === 0) return;
|
|
|
|
isProcessingQueue = true;
|
|
|
|
var img = imageQueue.shift();
|
|
loadImage(img, function() {
|
|
// After this image starts showing (or fails), process next after delay
|
|
setTimeout(function() {
|
|
isProcessingQueue = false;
|
|
processQueue();
|
|
}, defaults.queueInterval);
|
|
});
|
|
}
|
|
|
|
function observeImages() {
|
|
var images = document.querySelectorAll('img.lazyload, .post-content img:not(.lazy-loaded)');
|
|
|
|
images.forEach(function(img) {
|
|
if (img.classList.contains('lazy-loaded')) return;
|
|
|
|
// Update transition duration based on settings
|
|
if (defaults.showTime) {
|
|
// We'll set this via inline style or rely on CSS class if it matches default
|
|
// But for full control, let's set it
|
|
img.style.transitionDuration = (defaults.showTime / 1000) + 's';
|
|
}
|
|
|
|
if (img.getAttribute('data-lazy-src')) {
|
|
observer.observe(img);
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadImage(img, callback) {
|
|
var src = img.getAttribute('data-lazy-src');
|
|
if (!src) {
|
|
if (callback) callback();
|
|
return;
|
|
}
|
|
|
|
var temp = new Image();
|
|
|
|
var onComplete = function() {
|
|
// Swap source
|
|
img.src = src;
|
|
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
img.classList.add('lazy-loaded');
|
|
img.removeAttribute('data-lazy-src');
|
|
// Execute callback immediately after starting animation logic
|
|
if (callback) callback();
|
|
});
|
|
});
|
|
};
|
|
|
|
temp.onload = onComplete;
|
|
temp.onerror = function() {
|
|
// Fallback
|
|
img.src = src;
|
|
requestAnimationFrame(() => {
|
|
img.classList.add('lazy-loaded');
|
|
if (callback) callback();
|
|
});
|
|
};
|
|
|
|
temp.src = src;
|
|
}
|
|
|
|
function loadAllImages() {
|
|
var images = document.querySelectorAll('img.lazyload');
|
|
images.forEach(function(img) {
|
|
loadImage(img);
|
|
});
|
|
}
|
|
|
|
window.lazyLoadInit = init;
|
|
window.lazyLoadRefresh = observeImages;
|
|
|
|
})();
|