blog/themes/Ying/assets/js/modules/lazyload.js

(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;
                    
                    // Load immediately without queue
                    loadImage(img);
                    
                    // Stop observing this image once it's triggered
                    self.unobserve(img);
                }
            });
        }, {
            rootMargin: "0px 0px " + defaults.offsetBottom + "px 0px", 
            threshold: 0.01 
        });

        observeImages();
    }

    // Removed addToQueue and processQueue functions as we want instant loading

    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;

})();