soluteion图片懒加载

assets/js/commonVue.js

@@ -114,6 +114,7 @@ const App = {
           dataType: 'json',
           url: window.FQDN2 + 'siteCategory/siteCategoryList',
         }).done(function (res) {
+          _this.lazyFunc()
           _this.columnList = res.data;
           let expires = Date.now() + 1000 * 60 * 30; //半小时过期时间
           localStorage.setItem('storeColumnList', JSON.stringify({
@@ -265,6 +266,7 @@ const App = {
         url: window.FQDN2 + 'siteArticle/siteArticleList',
         data: requestParams
       }).done(function (res) {
+        _this.lazyFunc()
         var aa
         var bb
 
@@ -316,14 +318,44 @@ const App = {
 
     },
 
+    lazyFunc:function(){
+      setTimeout(function(){
+        // 1 获取全部图片的DOM节点
+        // 注意：querySelectorAll 值为伪数组利用扩展运算符转为真数组
+        const images = $('.lazyContainer img')
+        console.log(images)
+        // 2 监听页面滚动事件
+        window.addEventListener('scroll', lazyLoad)
+        // 3 定义页面滚动的处理函数
+        function lazyLoad(){
+            for (let i = 0; i < images.length; i++) {
+            // isVisible是否该图片位于可视区域 返回true 或false
+              if (isVisible(images[i])) {
+                // 将元素的自定义属性 data-src 赋值给元素的 src 属性 
+                // dataset.src 此为元素的自定义属性 data-src
+                images[i].src = images[i].dataset.src // 等价于：img.setAttribute('src', img.getAttribute('data-src'))
+                // 防止重复被遍历 加载完之后 删除元素不再加载
+                images.splice(i, 1)
+                i--
+              }
+            }
+        }
+        lazyLoad()
+        // 4 可视区域判断函数
+          function isVisible(img) {
+            // 判断是否在可视区域
+            const imgRect = img.getBoundingClientRect() // getBoundingClientRect 获取图片的动态信息
+            return imgRect.bottom > 0 && imgRect.top < window.innerHeight && imgRect.right > 0 && imgRect.left < window.innerWidth
+          }
+      },100)
+    },
+
     //弹框显示隐藏（子组件向父组件传值）
     handleChildEvent: function (value) {
       this.centerDialogVisible = value; // 处理从子组件接收到的数据
     },
 
 
-
-
     // 排序
     compare(property) {
       return function (a, b) {

solution/index.html

@@ -114,7 +114,7 @@
             <!--====== SOLUTION TYPE END ======-->
     
             <!--====== SOLUTION SECTION START ======-->
-            <section class="solution-section">
+            <section class="solution-section lazyContainer">
     
                 <div v-for="(item,index) in articalArray" :key="item.id" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}" style="padding:40px 0" >
                     <div class="container"  @click="oneInnerBox(item)">
@@ -128,7 +128,7 @@
                                     <div class="pt-40 mb-20">{{item.zhaiyao}}</div>
                                 </div>
                                 <div class="col-md-5 text-center">
-                                    <img :src="item.image" alt=""  v-bind:style="{opacity:contentBoolean?'1':'0'}" >
+                                    <img src="" alt="" :data-src="item.image">
                                 </div>
                             </div>
                         </div>
@@ -145,7 +145,7 @@
         
 
     </div>
-
+    
    
 </body>