fixed 懒加载效果

themes/Ying/assets/js/EasyLazyload.min.js

@@ -1 +1,97 @@
-!function(t){function o(o,a,i){var n,c,e=new Image;return e.src=o,e.onload=function(){a(e.width,e.height),r.onLoadBackStart(i,t("img[data-lazy-src]:eq("+i+")"))},[n,c]}function a(a,n){var c=l.eq(a).attr("data-lazy-src");o(c,function(){try{i(t("img[data-lazy-src]:eq("+a+")"),a,n)}catch(t){}},a)}function i(o,a,i){if(!o.attr("data-comp")){o.css("visibility","hidden"),o.attr("src",o.attr("data-lazy-src"));var c=o.width(),e=o.height(),d=o.offset().top,f=o.offset().left;o.css("visibility","visible"),t("body").append("<div class='meng-lazy-div"+a+"' style='background-color: "+r.coverColor+";position:absolute;width:"+c+"px;height:"+e+"px;top:"+d+"px;left:"+f+"px;z-index:500'>"+r.coverDiv+"</div>"),n(a,i,o),o.attr("data-comp","true")}}function n(o,a,i){t(".meng-lazy-div"+o).animate({opacity:"0"},r.showTime,function(){t(this).remove(),r.onLoadBackEnd(o,i),a()})}function c(){var o=t(document).scrollTop(),i=[];l.each(function(a){var n=t(this);n.attr("data-comp")||n.offset().top-o+r.offsetTopm>=0&&n.offset().top-o<s+r.offsetBottom&&i.push(a)}),0!=i.length&&a(i[0],function(){c()})}function e(){c()}function d(o){r=t.extend(r,o),l.each(function(){var o=t(this).attr("data-lazy-src");f.push(o),t(this).attr("src",A)}),e(),window.onscroll=function(){e()}}var r={coverColor:"#dfdfdf",coverDiv:"",showTime:300,offsetBottom:0,offsetTopm:50,onLoadBackEnd:function(t,o){},onLoadBackStart:function(t,o){}},f=[],s=t(window).height(),l=(t(window).width(),t("img[data-lazy-src]")),A="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";window.lazyLoadInit=d}($);
+(function ($) {
+    var defaults = {
+        showTime: 800,
+        offsetBottom: 0,
+        offsetTopm: 50,
+        onLoadBackEnd: function (index, dom) { },
+        onLoadBackStart: function (index, dom) { }
+    };
+
+    var $lazyImgList = $();
+
+    function checkOffset() {
+        var scrollTop = $(document).scrollTop();
+        var windowHeight = $(window).height();
+
+        $lazyImgList.each(function (index) {
+            var $dom = $(this);
+            if ($dom.attr("data-comp")) return; // Already processed
+
+            var offsetTop = $dom.offset().top;
+            // Check if image is in viewport (with some buffer)
+            if (offsetTop - scrollTop + defaults.offsetTopm >= 0 && 
+                offsetTop - scrollTop < (windowHeight + defaults.offsetBottom)) {
+                
+                showImg($dom, index);
+            }
+        });
+    }
+
+    function showImg($dom, index) {
+        $dom.attr("data-comp", "true");
+        var src = $dom.attr("data-lazy-src");
+        
+        defaults.onLoadBackStart(index, $dom);
+        
+        // Create a temporary image to preload
+        var temp = new Image();
+        temp.onload = function() {
+            // Prepare for transition
+            $dom.css({
+                "opacity": 0,
+                "transition": "opacity " + (defaults.showTime / 1000) + "s ease-in-out"
+            });
+            
+            // Swap source
+            $dom.attr("src", src);
+            
+            // Force reflow to ensure transition triggers
+            void $dom[0].offsetWidth; 
+            
+            // Fade in
+            $dom.css("opacity", 1);
+            
+            defaults.onLoadBackEnd(index, $dom);
+        };
+        temp.onerror = function() {
+            // On error, show anyway (maybe broken image icon) but ensure visible
+            $dom.attr("src", src);
+            $dom.css("opacity", 1);
+        };
+        temp.src = src;
+    }
+
+    function init(setting) {
+        defaults = $.extend(defaults, setting);
+        
+        // Auto-convert standard images to lazy load format
+        // Exclude .blog-img (Header Avatar) to prevent visibility issues
+        $("img").not(".blog-img").each(function() {
+            var $this = $(this);
+            // Only convert if not already converted and has a src
+            if (!$this.attr("data-lazy-src") && $this.attr("src")) {
+                $this.attr("data-lazy-src", $this.attr("src"));
+                // Set placeholder
+                $this.attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
+            }
+        });
+
+        $lazyImgList = $("img[data-lazy-src]");
+        
+        checkOffset();
+        
+        // Debounced scroll handler could be better, but sticking to simple binding for now
+        $(window).off("scroll.lazy").on("scroll.lazy resize.lazy", function() {
+            checkOffset();
+        });
+    }
+
+    function tryAgain() {
+        // Re-initialize for new content
+        init(defaults);
+    }
+
+    window.lazyLoadInit = init;
+    window.lazyLoadAgain = tryAgain;
+
+})(jQuery);

themes/Ying/assets/js/main.js

@@ -112,8 +112,34 @@ window.initArtalk = function() {
         emoticons: window.artalkConfig.emoticons
     });
 
-    // Inject AI Comment
+    // Inject AI Comment & Lazy Load & Animation
     window.artalk.on('list-loaded', function() {
+        // 1. Lazy Load Logic
+        var artalkImages = document.querySelectorAll('.atk-list-body img');
+        artalkImages.forEach(function (img) {
+            var src = img.getAttribute('src');
+            // Check if it's already lazy loaded or placeholder
+            if (src && !img.getAttribute('data-lazy-src') && src.indexOf('data:image') !== 0) {
+                 img.setAttribute('data-lazy-src', src);
+                 img.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+            }
+        });
+
+        // 2. Animation Logic
+        var comments = document.querySelectorAll('.atk-list-body .atk-comment');
+        if (comments) {
+            comments.forEach(function (comment, index) {
+                comment.classList.add('atk-comment-animate');
+                comment.style.animationDelay = (index * 0.04) + 's';
+            });
+        }
+
+        // 3. Trigger global lazy load update
+        if (window.lazyLoadAgain) {
+            window.lazyLoadAgain();
+        }
+
+        // 4. AI Comment Logic
         if (window.artalkConfig.aiComment) {
             // Force hide "No comments" message via CSS class
             var list = document.querySelector('.atk-list');

themes/Ying/assets/js/mypjax.js

@@ -7,131 +7,8 @@ var pjax = new Pjax({
     // 移除 sideBySide，改用默认替换以配合骨架屏逻辑
 });
 // 设置图片灯箱回调函数
-function lazyimg_pjax() {
-    ; (function ($) {
-
-        var defaults = {
-            coverColor: "#dfdfdf",
-            coverDiv: "",
-            showTime: 300,
-            offsetBottom: 0,
-            offsetTopm: 50,
-            onLoadBackEnd: function (index, dom) { },
-            onLoadBackStart: function (index, dom) { }
-        }
-
-        //所有待load src
-        var srcList = []
-        var lazyLoadCoutn = 0;
-        var windowHeight = $(window).height();
-        var windowWidth = $(window).width();
-        var lazyImgList = $("img[data-lazy-src]");
-        var default_base64_src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
-
-        //获取img
-        function getImgNaturalDimensions(src, callback, lazyLoadCoutn) {
-            var nWidth, nHeight
-            var image = new Image()
-            image.src = src;
-            image.onload = function () {
-                callback(image.width, image.height);
-                defaults.onLoadBackStart(lazyLoadCoutn, $("img[data-lazy-src]:eq(" + lazyLoadCoutn + ")"));
-            }
-            return [nWidth, nHeight];
-        }
-
-        function showImg(lazyLoadCoutn, callback) {
-
-            var src = lazyImgList.eq(lazyLoadCoutn).attr("data-lazy-src")
-            getImgNaturalDimensions(src, function () {
-                try {
-
-                    meng($("img[data-lazy-src]:eq(" + lazyLoadCoutn + ")"), lazyLoadCoutn, callback)
-                } catch (error) {
-
-                }
-            }, lazyLoadCoutn)
-        }
-
-        function meng(jDom, lazyLoadCoutn, callback) {
-            if (jDom.attr("data-comp")) {
-                return;
-            }
-            jDom.css("visibility", "hidden");
-            jDom.attr("src", jDom.attr("data-lazy-src"))
-            var w = jDom.width();
-            var h = jDom.height();
-            var offsetTop = jDom.offset().top;
-            var offsetLeft = jDom.offset().left;
-
-            jDom.css("visibility", "visible");
-            $("body").append("<div class='meng-lazy-div" + lazyLoadCoutn + "' style='background-color: " + defaults.coverColor + ";position:absolute;width:" + w + "px;height:" + h + "px;top:" + offsetTop + "px;left:" + offsetLeft + "px;z-index:500'>" + defaults.coverDiv + "</div>");
-            noneM(lazyLoadCoutn, callback, jDom);
-            jDom.attr("data-comp", "true");
-        }
-
-        function noneM(lazyLoadCoutn, callback, jDom) {
-            if (true) {
-                $(".meng-lazy-div" + lazyLoadCoutn).animate({ opacity: "0" }, defaults.showTime, function () {
-                    $(this).remove();
-                    defaults.onLoadBackEnd(lazyLoadCoutn, jDom)
-                    callback();
-                });
-            }
-        }
-
-        function checkOffset() {
-            var scrollTop = $(document).scrollTop();
-            var onlazyList = [];
-            lazyImgList.each(function (index) {
-                var dom = $(this);
-                if (!dom.attr("data-comp")) {
-                    if (dom.offset().top - scrollTop + defaults.offsetTopm >= 0 && dom.offset().top - scrollTop < (windowHeight + defaults.offsetBottom)) {
-                        onlazyList.push(index);
-                    }
-                }
-            })
-
-            if (onlazyList.length != 0) {
-                showImg(onlazyList[0], function () {
-                    checkOffset();
-                });
-            }
-        }
-
-        function range() {
-            checkOffset();
-
-        }
-
-        function init(setting) {
-            lazyImgList = $("img[data-lazy-src]");
-            defaults = $.extend(defaults, setting);
-
-            lazyImgList.each(function () {
-                var sr = $(this).attr("data-lazy-src");
-                srcList.push(sr);
-
-                $(this).attr("src", default_base64_src);
-            });
-            range();
-            window.onscroll = function () {
-                range()
-            }
-        }
-        function tryAgain() {
-            $("img[data-lazy-src]").removeAttr("data-comp")
-            init(defaults)
-        }
-
-        window.lazyLoadInit = init;
-
-        window.lazyLoadAgain = tryAgain;
-
-
-    })($)
-}
-// 设置pjax预先加载代码
+// Removed redundant lazyimg_pjax definition as EasyLazyload.min.js handles it globally now
+// pjax预先加载代码
 function pjax_reload() {
     // 给pjax容器加入css过渡动画
     // $("#pjax-container").addClass("uk-animation-slide-bottom-small");
@@ -156,7 +33,6 @@ document.addEventListener("pjax:send", function () {
 // Pjax 成功后，重新加载下面的函数
 document.addEventListener("pjax:success", function () {
     // 重载图片懒加载插件的js
-    lazyimg_pjax()
     lazyLoadInit({
         // coverColor: "white",
         // coverDiv: "<div style='display: flex; justify-content: center; align-items: center; height: 200px; color: #000000;'><span>优世界·一个记录生活点滴的小站</span></div>",