debug

code/public/template/shikong/huiyuan/js/class/lozyLoading.js

@@ -0,0 +1,73 @@
+
+import { asyncFunction} from '../public/api/fetch.js';
+
+import ConfigsJs from './config.js';
+const Configs = new ConfigsJs();
+/*
+ * 调用
+ * 引入 LazyLoading.js
+ * img 绑定类名  jqlazyload
+ * img 绑定属性 data-wh=0.69  值根据实质需求定，因为如果图片不设置高度，offsettop 获取的值不准确
+ * img dat-original="真实地址"
+ * img src="懒加载图片"
+ * import LazyLoadingJs from '../class/lozyLoading';
+*  const LazyLoading = new LazyLoadingJs();
+ * LazyLoading.int()
+ */
+class LazyLoading {
+    constructor() {
+        // 初始化配置数据
+        this.arrImgDom = document.querySelectorAll('.jqlazyload');
+    }
+
+    int() {
+        var config = {
+            rootMargin: '0px',
+            threshold: 0,
+        }
+        let observer = new IntersectionObserver((entries, self) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    let domImg = entry.target
+                    let strImgSrc = domImg.dataset.original
+                    if (strImgSrc) {
+                        if (strImgSrc.indexOf('encry') >= 0) {
+                            asyncFunction(strImgSrc + '?v=' + Configs.get('COVER_VERSION'))
+                                .then(result => {
+                                    // 异步操作成功时的回调
+                                    let base64Content = `data:image/png;base64,${result}`;
+                                    domImg.src = base64Content
+                                    this.setImgHeightFun(domImg)
+                                })
+                                .catch(error => {
+                                    // 异步操作失败时的回调
+                                    console.error(error);
+                                });
+                        } else {
+                            domImg.src = strImgSrc
+                            domImg.classList.remove("jqlazyload");
+                            this.setImgHeightFun(domImg)
+                        }
+                    }
+                    // 解除观察
+                    self.unobserve(entry.target)
+                }
+            })
+        }, config)
+
+        this.arrImgDom.forEach((image) => {
+            observer.observe(image)
+        })
+    }
+
+    setImgHeightFun(element) {
+        let imgDataWh = element.getAttribute('data-wh')
+        if (imgDataWh) {
+            let $height = element.getBoundingClientRect().width * Number(imgDataWh)
+            element.style.height = $height + 'px';
+        }
+        element.classList.remove('jqlazyload');
+    }
+}
+
+export default LazyLoading;