列表图片延迟加载

assets/js/commonVue.js

@@ -39,6 +39,7 @@ const App = {
           modelType: 1,
           columnImage: '', //栏目图片
           footerBoolean:false, //底部延时加载（解决页面闪烁）
+          contentBoolean:false,//中间延时加载（优化banner图片加载慢的问题）
 
           // 公共弹框
           centerDialogVisible: false,
@@ -127,9 +128,12 @@ const App = {
         this.loading = false;
         this.handleColumnData()
       }
+      setTimeout(function(){
+        _this.contentBoolean=true
+      },500)
       setTimeout(function(){
         _this.footerBoolean=true
-      },1000)
+      },3000)
     },
 
 

solution/index.html

@@ -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="" >
+                                    <img :src="item.image" alt=""  v-if="contentBoolean" >
                                 </div>
                             </div>
                         </div>