diff --git a/themes/Ying/assets/js/EasyLazyload.min.js b/themes/Ying/assets/js/EasyLazyload.min.js index 2d946485..0e08a546 100644 --- a/themes/Ying/assets/js/EasyLazyload.min.js +++ b/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("
"+r.coverDiv+"
"),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= 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); \ No newline at end of file diff --git a/themes/Ying/assets/js/main.js b/themes/Ying/assets/js/main.js index f0d2b875..40bd93f1 100644 --- a/themes/Ying/assets/js/main.js +++ b/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'); diff --git a/themes/Ying/assets/js/mypjax.js b/themes/Ying/assets/js/mypjax.js index ad8e12ea..d744b0c8 100644 --- a/themes/Ying/assets/js/mypjax.js +++ b/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("
" + defaults.coverDiv + "
"); - 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: "
优世界·一个记录生活点滴的小站
",