初始化项目

AUTS.Web/Plugin/loadImage.js

@@ -0,0 +1,54 @@
+// onload是等所有的资源文件加载完毕以后再绑定事件
+window.onload = function () {
+  
+}
+
+//// 获取图片列表，即img标签列表
+var imgs = document.querySelectorAll('img');
+function getTop(e) {
+    return e.offsetTop;
+}
+// 懒加载实现 
+function lazyload(imgs) {
+
+    imgs = document.querySelectorAll('img');
+
+    for (let i of imgs) {
+        if ($(i).is(':visible') == true) {
+            let trueSrc = i.getAttribute("data-src");
+            if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
+                $(i).removeAttr("data-src")
+                i.setAttribute("src", trueSrc);
+            }
+        }
+
+    }
+    
+ 
+   
+    return;
+
+
+    // 可视区域高度
+    var h = window.innerHeight;
+    //滚动区域高度
+    var s = document.documentElement.scrollTop || document.body.scrollTop;
+    for (let i of imgs) {
+        //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
+        //计算方式和第一种方式不同
+        if (i.getBoundingClientRect().top < window.innerHeight) {
+            let trueSrc = i.getAttribute("data-src");
+            if (trueSrc != 'null' && trueSrc != null && trueSrc.indexOf('{{') < 0 && trueSrc.indexOf('}}') < 0) {
+                $(i).removeAttr("data-src")
+                i.setAttribute("src", trueSrc);
+            }
+        }
+    }
+}
+setTimeout(lazyload(imgs), 20);
+
+// 滚屏函数
+window.onscroll = function () {
+    //保证每次取到的为最新的
+    lazyload(imgs);
+}