From c107882307aa036f8cf159835313450086a61196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E6=B3=95=E4=B9=8B=E4=B9=A6=28appotry=29?= Date: Sun, 21 Apr 2024 21:48:55 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=AE=E6=AD=A3lazyload=E6=9C=89?= =?UTF-8?q?=E6=97=B6=E5=80=99=E5=A4=B1=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/utils.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/source/js/utils.js b/source/js/utils.js index d61bc264..9c6f4c36 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -39,10 +39,16 @@ Fluid.utils = { offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0; var rect = element.getBoundingClientRect(); const viewportHeight = window.innerHeight || document.documentElement.clientHeight; - return ( - (rect.top >= 0 && rect.top <= viewportHeight * (1 + offsetFactor) + rect.height / 2) || - (rect.bottom >= 0 && rect.bottom <= viewportHeight * (1 + offsetFactor) + rect.height / 2) - ); + const viewportWidth = window.innerWidth || document.documentElement.clientWidth; + + // 元素顶部和底部是否在可见区域内 + const verticallyVisible = rect.top + offsetFactor < viewportHeight && rect.bottom - offsetFactor > 0; + + // 元素左侧和右侧是否在可见区域内 + const horizontallyVisible = rect.left + offsetFactor < viewportWidth && rect.right - offsetFactor > 0; + + // 元素整体是否可见 + return verticallyVisible && horizontallyVisible; }, waitElementVisible: function(selectorOrElement, callback, offsetFactor) { From a2db9c12f25487bb043fc18fbc5579d41c5ac68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E6=B3=95=E4=B9=8B=E4=B9=A6=28appotry=29?= Date: Mon, 22 Apr 2024 16:18:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=81=8F=E7=A7=BB?= =?UTF-8?q?=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/utils.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/source/js/utils.js b/source/js/utils.js index 9c6f4c36..d6637123 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -42,13 +42,14 @@ Fluid.utils = { const viewportWidth = window.innerWidth || document.documentElement.clientWidth; // 元素顶部和底部是否在可见区域内 - const verticallyVisible = rect.top + offsetFactor < viewportHeight && rect.bottom - offsetFactor > 0; + const verticallyVisible = rect.top + (viewportHeight * offsetFactor) < viewportHeight || rect.bottom - (viewportHeight * offsetFactor) > 0; // 元素左侧和右侧是否在可见区域内 - const horizontallyVisible = rect.left + offsetFactor < viewportWidth && rect.right - offsetFactor > 0; + const horizontallyVisible = rect.left + (viewportWidth * offsetFactor) < viewportWidth || rect.right - (viewportWidth * offsetFactor) > 0; - // 元素整体是否可见 - return verticallyVisible && horizontallyVisible; + // 判断元素的顶部、底部、左侧或右侧是否在视口内 + // 如果有一个在视口内,则认为元素可见 + return verticallyVisible || horizontallyVisible; }, waitElementVisible: function(selectorOrElement, callback, offsetFactor) { From 4147442abddb152b80d7e2e9831ecd0122aa1d56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E6=B3=95=E4=B9=8B=E4=B9=A6=28appotry=29?= Date: Mon, 22 Apr 2024 16:33:15 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/utils.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/source/js/utils.js b/source/js/utils.js index d6637123..3169d3ac 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -38,18 +38,12 @@ Fluid.utils = { elementVisible: function(element, offsetFactor) { offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0; var rect = element.getBoundingClientRect(); - const viewportHeight = window.innerHeight || document.documentElement.clientHeight; - const viewportWidth = window.innerWidth || document.documentElement.clientWidth; - - // 元素顶部和底部是否在可见区域内 - const verticallyVisible = rect.top + (viewportHeight * offsetFactor) < viewportHeight || rect.bottom - (viewportHeight * offsetFactor) > 0; - - // 元素左侧和右侧是否在可见区域内 - const horizontallyVisible = rect.left + (viewportWidth * offsetFactor) < viewportWidth || rect.right - (viewportWidth * offsetFactor) > 0; + const viewportHeight = (window.innerHeight || document.documentElement.clientHeight) * (1 + offsetFactor); + const viewportWidth = (window.innerWidth || document.documentElement.clientWidth) * (1 + offsetFactor); // 判断元素的顶部、底部、左侧或右侧是否在视口内 // 如果有一个在视口内,则认为元素可见 - return verticallyVisible || horizontallyVisible; + return rect.top < viewportHeight || rect.bottom > 0 || rect.left < viewportWidth || rect.right > 0; }, waitElementVisible: function(selectorOrElement, callback, offsetFactor) {