fix: 修复 PJAX 页面切换时的资源加载问题
- 修复懒加载未重新初始化导致图片不显示的问题 - 添加全局 lazyloadObserver 变量,在 PJAX 切换时正确清理旧的 Observer - 修复 Zoomify 实例未清理导致的内存泄漏和功能异常 - 添加全局 zoomifyInstances 数组管理所有 Zoomify 实例 - 在 pjax:beforeReplace 事件中清理所有旧资源(懒加载、Zoomify、Tippy) - 优化资源初始化顺序,先初始化懒加载再初始化其他功能 - 在 pjax:end 事件中延迟再次确保资源正确加载 - 修复滚动位置恢复逻辑,确保页面跳转后正确定位 - 重置图片状态(opacity、transform、transition)避免样式残留
This commit is contained in:
113
argontheme.js
113
argontheme.js
@@ -2233,12 +2233,36 @@ function showPostOutdateToast(){
|
|||||||
showPostOutdateToast();
|
showPostOutdateToast();
|
||||||
|
|
||||||
/*Zoomify*/
|
/*Zoomify*/
|
||||||
|
// 全局 Zoomify 实例数组,用于清理
|
||||||
|
var zoomifyInstances = [];
|
||||||
|
|
||||||
function zoomifyInit(){
|
function zoomifyInit(){
|
||||||
|
// 清理旧的 Zoomify 实例
|
||||||
|
if (zoomifyInstances.length > 0) {
|
||||||
|
zoomifyInstances.forEach(function(instance) {
|
||||||
|
try {
|
||||||
|
if (instance && typeof instance.destroy === 'function') {
|
||||||
|
instance.destroy();
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
});
|
||||||
|
zoomifyInstances = [];
|
||||||
|
}
|
||||||
|
|
||||||
if (argonConfig.zoomify == false){
|
if (argonConfig.zoomify == false){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (typeof $.fn.zoomify === 'function') {
|
if (typeof $.fn.zoomify === 'function') {
|
||||||
$("article img").zoomify(argonConfig.zoomify);
|
$("article img:not(.zoomify-initialized)").each(function() {
|
||||||
|
let $img = $(this);
|
||||||
|
$img.addClass('zoomify-initialized');
|
||||||
|
try {
|
||||||
|
let instance = $img.zoomify(argonConfig.zoomify).data('zoomify');
|
||||||
|
if (instance) {
|
||||||
|
zoomifyInstances.push(instance);
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
zoomifyInit();
|
zoomifyInit();
|
||||||
@@ -2277,7 +2301,32 @@ $.fancybox.defaults.i18n = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/*Lazyload - 使用 IntersectionObserver 实现懒加载*/
|
/*Lazyload - 使用 IntersectionObserver 实现懒加载*/
|
||||||
|
// 全局 Observer 实例,用于清理
|
||||||
|
var lazyloadObserver = null;
|
||||||
|
|
||||||
function lazyloadInit() {
|
function lazyloadInit() {
|
||||||
|
// 清理旧的 Observer
|
||||||
|
if (lazyloadObserver) {
|
||||||
|
lazyloadObserver.disconnect();
|
||||||
|
lazyloadObserver = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否启用懒加载
|
||||||
|
if (argonConfig.lazyload === false) {
|
||||||
|
// 未启用懒加载时,直接加载所有图片
|
||||||
|
let images = document.querySelectorAll('img.lazyload[data-src]');
|
||||||
|
images.forEach(function(img) {
|
||||||
|
let src = img.getAttribute('data-src');
|
||||||
|
if (src) {
|
||||||
|
img.src = src;
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
img.classList.remove('lazyload');
|
||||||
|
img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let images = document.querySelectorAll('img.lazyload[data-src]');
|
let images = document.querySelectorAll('img.lazyload[data-src]');
|
||||||
if (images.length === 0) return;
|
if (images.length === 0) return;
|
||||||
|
|
||||||
@@ -2286,12 +2335,12 @@ function lazyloadInit() {
|
|||||||
|
|
||||||
// 使用 IntersectionObserver 实现懒加载
|
// 使用 IntersectionObserver 实现懒加载
|
||||||
if ('IntersectionObserver' in window) {
|
if ('IntersectionObserver' in window) {
|
||||||
let observer = new IntersectionObserver(function(entries) {
|
lazyloadObserver = new IntersectionObserver(function(entries) {
|
||||||
entries.forEach(function(entry) {
|
entries.forEach(function(entry) {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
let img = entry.target;
|
let img = entry.target;
|
||||||
loadImage(img, effect);
|
loadImage(img, effect);
|
||||||
observer.unobserve(img);
|
lazyloadObserver.unobserve(img);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, {
|
}, {
|
||||||
@@ -2299,7 +2348,11 @@ function lazyloadInit() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
images.forEach(function(img) {
|
images.forEach(function(img) {
|
||||||
observer.observe(img);
|
// 重置图片状态
|
||||||
|
img.style.opacity = '';
|
||||||
|
img.style.transform = '';
|
||||||
|
img.style.transition = '';
|
||||||
|
lazyloadObserver.observe(img);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 降级方案:直接加载所有图片
|
// 降级方案:直接加载所有图片
|
||||||
@@ -2494,6 +2547,35 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
}).on('pjax:send', function() {
|
}).on('pjax:send', function() {
|
||||||
NProgress.set(0.618);
|
NProgress.set(0.618);
|
||||||
}).on('pjax:beforeReplace', function(e, dom) {
|
}).on('pjax:beforeReplace', function(e, dom) {
|
||||||
|
// 清理旧页面的资源
|
||||||
|
if (lazyloadObserver) {
|
||||||
|
lazyloadObserver.disconnect();
|
||||||
|
lazyloadObserver = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理 Zoomify 实例
|
||||||
|
if (zoomifyInstances.length > 0) {
|
||||||
|
zoomifyInstances.forEach(function(instance) {
|
||||||
|
try {
|
||||||
|
if (instance && typeof instance.destroy === 'function') {
|
||||||
|
instance.destroy();
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
});
|
||||||
|
zoomifyInstances = [];
|
||||||
|
}
|
||||||
|
$('img.zoomify-initialized').removeClass('zoomify-initialized');
|
||||||
|
|
||||||
|
// 清理 Tippy 实例
|
||||||
|
if (typeof tippy !== 'undefined') {
|
||||||
|
document.querySelectorAll('[data-tippy-root]').forEach(function(el) {
|
||||||
|
try {
|
||||||
|
el._tippy?.destroy?.();
|
||||||
|
} catch(e) {}
|
||||||
|
});
|
||||||
|
$('.tippy-initialized').removeClass('tippy-initialized');
|
||||||
|
}
|
||||||
|
|
||||||
if ($("#post_comment", dom[0]).length > 0){
|
if ($("#post_comment", dom[0]).length > 0){
|
||||||
$("#fabtn_go_to_comment").removeClass("d-none");
|
$("#fabtn_go_to_comment").removeClass("d-none");
|
||||||
}else{
|
}else{
|
||||||
@@ -2542,6 +2624,12 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
foldLongShuoshuo();
|
foldLongShuoshuo();
|
||||||
$("html").trigger("resize");
|
$("html").trigger("resize");
|
||||||
|
|
||||||
|
// 恢复滚动位置
|
||||||
|
if (pjaxScrollTop > 0) {
|
||||||
|
$("body,html").scrollTop(pjaxScrollTop);
|
||||||
|
pjaxScrollTop = 0;
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof(window.pjaxLoaded) == "function"){
|
if (typeof(window.pjaxLoaded) == "function"){
|
||||||
try{
|
try{
|
||||||
window.pjaxLoaded();
|
window.pjaxLoaded();
|
||||||
@@ -2552,12 +2640,17 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
|
|
||||||
NProgress.done();
|
NProgress.done();
|
||||||
}).on('pjax:end', function() {
|
}).on('pjax:end', function() {
|
||||||
waterflowInit();
|
// 再次确保资源正确加载
|
||||||
lazyloadInit();
|
setTimeout(function() {
|
||||||
// 重置移动端目录状态
|
waterflowInit();
|
||||||
if (typeof window.resetMobileCatalog === 'function') {
|
lazyloadInit();
|
||||||
window.resetMobileCatalog();
|
|
||||||
}
|
// 重置移动端目录状态
|
||||||
|
if (typeof window.resetMobileCatalog === 'function') {
|
||||||
|
window.resetMobileCatalog();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
// GT4: PJAX 后确保评论页验证码已初始化
|
// GT4: PJAX 后确保评论页验证码已初始化
|
||||||
try {
|
try {
|
||||||
if ($('#geetest-captcha').length > 0) {
|
if ($('#geetest-captcha').length > 0) {
|
||||||
|
|||||||
Reference in New Issue
Block a user