diff --git a/server/src/main/resources/static/js/lazyload.js b/server/src/main/resources/static/js/lazyload.js index e36cf62b6..a9afe603e 100644 --- a/server/src/main/resources/static/js/lazyload.js +++ b/server/src/main/resources/static/js/lazyload.js @@ -1,67 +1,68 @@ -function isInSight(el) { - var bound = el.getBoundingClientRect(); - var clientHeight = window.innerHeight; - //只考虑向下滚动加载 - //const clientWidth=window.innerWeight; - return bound.top <= clientHeight + 100; +function isInSight(el, i) { + var bound = el.getBoundingClientRect() + var clientHeight = window.innerHeight + //只考虑向下滚动加载 + //const clientWidth=window.innerWeight; + return bound.top + bound.height >= 0 && bound.top <= clientHeight + 100 } - - function checkImgs() { - var index = 0; - var imgs = document.querySelectorAll('.my-photo'); - for (var i = index; i < imgs.length; i++) { - if (isInSight(imgs[i])) { - loadImg(imgs[i]); - index = i; - } + var index = 0 + var imgs = document.querySelectorAll('.my-photo') + for (var i = index; i < imgs.length; i++) { + if (isInSight(imgs[i], i)) { + loadImg(imgs[i]) + index = i } + } } function loadImg(el) { - var source = el.getAttribute("data-src"); - el.src = source; - + var source = el.getAttribute('data-src') + el.src = source } -// var mustRun = 500 -// function throttle(fn, mustRun) { -// var timer = null; -// var previous = null; -// return function() { -// var now = new Date(); -// var context = this; -// var args = arguments; -// if (!previous) { -// previous = now; -// } -// var remaining = now - previous; -// if (mustRun && remaining >= mustRun) { -// fn.apply(context, args); -// previous = now; -// } -// } -// } +// 滚动停止检测相关变量 +var scrollTimer = null +var isScrolling = false -function throttle(fn) { - var timer = null; - var previous = null; - return function () { - var now = new Date(); - var context = this; - var args = arguments; - if (!previous) { - previous = now; - } - var remaining = now - previous; - setTimeout(refresh(fn, remaining, context, args, previous, now)); - } +/** + * 滚动停止检测函数 + * 滚动停止500毫秒后执行图片加载 + */ +function onScrollStop() { + isScrolling = false + // console.log('滚动停止,开始加载图片') + checkImgs() } -function refresh(fn, remaining, context, args, previous, now) { - if (remaining >= 500) { - fn.apply(context, args); - previous = now; +/** + * 滚动事件处理函数 + * 设置滚动状态,并延迟执行图片加载 + */ +function handleScroll() { + isScrolling = true + + // 清除之前的定时器 + if (scrollTimer) { + clearTimeout(scrollTimer) + } + + // 滚动停止500毫秒后执行图片加载 + scrollTimer = setTimeout(function () { + if (isScrolling) { + onScrollStop() } + }, 500) } + +// 监听滚动事件 +window.addEventListener('scroll', handleScroll) + +// 监听窗口大小变化事件 +window.addEventListener('resize', handleScroll) + +// 页面加载完成后执行一次检查 +document.addEventListener('DOMContentLoaded', function () { + setTimeout(checkImgs, 100) +}) diff --git a/server/src/main/resources/web/officePicture.ftl b/server/src/main/resources/web/officePicture.ftl index e9d69032c..01a1ecaa1 100644 --- a/server/src/main/resources/web/officePicture.ftl +++ b/server/src/main/resources/web/officePicture.ftl @@ -44,9 +44,11 @@ window.onload = function () { /*初始化水印*/ initWaterMark(); - checkImgs(); + // 移除这行,因为新的懒加载逻辑已经在lazyload.js中处理 + // checkImgs(); }; - window.onscroll = throttle(checkImgs); + // 移除这行,因为新的懒加载逻辑已经在lazyload.js中处理 + // window.onscroll = throttle(checkImgs); function changePreviewType(previewType) { var url = window.location.href; if (url.indexOf("officePreviewType=image") !== -1) {