优化一下博客的性能

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

@@ -1,77 +1,59 @@
 (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
+        offsetBottom: 100,
+        showTime: 1100,
+        queueInterval: 200
     };
 
     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);
-                }
+                if (!entry.isIntersecting) return;
+
+                var img = entry.target;
+                loadImage(img);
+                self.unobserve(img);
             });
         }, {
-            rootMargin: "0px 0px " + defaults.offsetBottom + "px 0px", 
-            threshold: 0.01 
+            rootMargin: "0px 0px " + defaults.offsetBottom + "px 0px",
+            threshold: 0.01
         });
 
         observeImages();
     }
 
-    // Removed addToQueue and processQueue functions as we want instant loading
+    function getPendingImages() {
+        return document.querySelectorAll('img.lazyload[data-lazy-src], .post-content img[data-lazy-src]:not(.lazy-loaded)');
+    }
 
     function observeImages() {
-        var images = document.querySelectorAll('img.lazyload, .post-content img:not(.lazy-loaded)');
-        
+        var images = getPendingImages();
+
         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);
-            }
+            observer.observe(img);
         });
     }
 
+    function markLoaded(img, callback) {
+        img.classList.add('lazy-loaded');
+        img.removeAttribute('data-lazy-src');
+        if (callback) callback();
+    }
+
     function loadImage(img, callback) {
         var src = img.getAttribute('data-lazy-src');
         if (!src) {
@@ -79,37 +61,28 @@
             return;
         }
 
+        img.decoding = 'async';
+
         var temp = new Image();
-        
-        var onComplete = function() {
-            // Swap source
+        temp.decoding = 'async';
+
+        temp.onload = function() {
             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();
-                });
+            requestAnimationFrame(function() {
+                markLoaded(img, callback);
             });
         };
 
-        temp.onload = onComplete;
         temp.onerror = function() {
-            // Fallback
             img.src = src;
-            requestAnimationFrame(() => {
-                img.classList.add('lazy-loaded');
-                if (callback) callback();
-            });
+            markLoaded(img, callback);
         };
 
         temp.src = src;
     }
 
     function loadAllImages() {
-        var images = document.querySelectorAll('img.lazyload');
+        var images = getPendingImages();
         images.forEach(function(img) {
             loadImage(img);
         });
@@ -117,5 +90,4 @@
 
     window.lazyLoadInit = init;
     window.lazyLoadRefresh = observeImages;
-
 })();