新闻和产品列表页图片懒加载实现

news/index.html

@@ -101,9 +101,12 @@
                             <ul v-if="!loading">
                                 <!-- 新闻列表主题start -->
                                 <div class="row">
-                                    <div class="col-md-4 newItemOne" v-for="item in articalArray" :key="item.id">
+                                    <div class="col-md-4 newItemOne " v-for="item in articalArray" :key="item.id">
                                         <div class="oneInnerBox" @click="oneInnerBox(item)">
-                                            <div class="img"  v-bind:style="{backgroundImage:'url('+item.image+')',opacity:contentBoolean?'1':'0'}">
+                                            <div class="img" style="overflow:hidden" >
+                                                <div class="demo-image__lazy">
+                                                    <el-image  :key="item.image" :src="item.image" fit="contain"  style="display:block"/>
+                                                  </div>                                                
                                             </div>
                                             <a class="line-two">{{item.title}}</a>
                                             <span>{{timeFormatSeconds(item.createdate?item.createdate:'')}}</span>

product/index.html

@@ -91,14 +91,14 @@
             <!--====== COMMON BREADCRUMB END ======-->
     
             <!--====== PRODUCT GRID START======-->
-            <section class="product-grid-section  container pt-20 pb-60" >
+            <section class="product-grid-section  container pt-20 pb-60 lazyContainer" >
     
     
                     <div class="row pt-80 content"  >
                         <div class="col-md-4 newItemOne "  v-for="item in articalArray" :key="item.id">
                             <div class="oneInnerBox" @click="oneInnerBox(item)">
-                                <div class="img"  v-bind:style="{backgroundImage:'url('+item.image+')',opacity:contentBoolean?'1':'0'}">
-                                    <!-- <img :src="item.image" alt=""> -->
+                                <div class="img">
+                                    <img src="" alt="" :data-src="item.image">
                                 </div>