给图片添加懒加载模式

展示端/public/myData/data.js

@@ -4,6 +4,54 @@ const infoTemo = {
   serverUrl: serverUrlTemp,
   swArr: [
     {
+      id: 17,
+      name: '碧色万里--10-12世纪的草原丝绸之路',
+      partOf: '中国丝绸博物馆',
+      link: `${serverUrlTemp}/bwCN/scene/SG-cZhL5llbCLb-09/scene/index.html`,
+      code: 'SG-cZhL5llbCLb-09',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true //属于轮播图
+    },
+    {
+      id: 16,
+      name: '物华天宝 黎海琼珍',
+      partOf: '海南省博物馆',
+      link: `${serverUrlTemp}/bwCN/scene/wuHuaTianBao/scene/index.html`,
+      code: 'mm-1562',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true //属于轮播图
+    },
+    {
+      id: 15,
+      name: '元代的杭州和泉州',
+      partOf: '杭州博物馆',
+      link: `${serverUrlTemp}/bwCN/scene/SG-KMDgP6uBEsn/index.html`,
+      code: 'SG-KMDgP6uBEsn',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true //属于轮播图
+    },
+    {
+      id: 14,
+      name: '武汉博物馆',
+      partOf: '琬琰英华——馆藏历代文物珍赏',
+      link: `${serverUrlTemp}/bwCN/scene/WuhanMuseum/scene/index.html`,
+      code: 'WuhanMuseum',
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: false //属于轮播图
+    },
+    {
       id: 13,
       name: '历代中央政权有效治理新疆的历史起点',
       partOf: '西域都护府博物馆',
@@ -13,7 +61,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 12,
@@ -25,7 +73,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 11,
@@ -37,7 +85,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 8,
@@ -49,7 +97,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 10,
@@ -61,7 +109,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 9,
@@ -73,7 +121,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
 
     {
@@ -86,7 +134,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 6,
@@ -98,7 +146,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 5,
@@ -110,7 +158,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 3,
@@ -122,7 +170,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 4,
@@ -134,7 +182,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1, //属于第一个模板
-      isSW: true //属于轮播图
+      isSW: false //属于轮播图
     },
     {
       id: 2,
@@ -146,7 +194,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1,
-      isSW: true
+      isSW: false
     },
     {
       id: 1,
@@ -158,7 +206,7 @@ const infoTemo = {
       newNum: 0,
       changeSta: true,
       loc: 1,
-      isSW: true
+      isSW: false
     }
   ]
 }

展示端/src/pages/A1home/index.module.scss

@@ -8,6 +8,16 @@
       overflow-y: auto;
 
       .A1top {
+        .adm-image-tip {
+          min-height: 219px;
+        }
+        .imgLoding1 {
+          width: 100%;
+          min-height: 219px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
         img {
           width: 100%;
           height: auto;
@@ -37,6 +47,17 @@
             display: inline-block;
             margin-right: 15px;
             vertical-align: top;
+            .adm-image,
+            .adm-image-tip {
+              min-height: 184px;
+            }
+            .imgLoding1 {
+              width: 100%;
+              min-height: 184px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
             & > img {
               cursor: pointer;
               width: 100%;

展示端/src/pages/A1home/index.tsx

@@ -8,6 +8,7 @@ import CountUp from 'react-countup'
 import { A1_APIgetNumList } from '@/store/action/A1list'
 import logoImg from '../../assets/img/logo.png'
 import flooImg from '../../assets/img/flooImg.jpg'
+import { Image } from 'antd-mobile'
 
 type NumListRowType = {
   num: string
@@ -104,9 +105,10 @@ function A1home() {
                     //  onClick={() => history.push(`/scene/${item.id}`)}
                     onClick={() => openPage(item.link)}
                   >
-                    <img
+                    <Image
+                      lazy
                       src={`${myInfo.serverUrl}/bwCN/myData/img/${item.id}h.jpg`}
-                      alt=''
+                      placeholder={<div className='imgLoding1'>加载中...</div>}
                     />
                   </div>
                 </Swiper.Item>
@@ -121,11 +123,11 @@ function A1home() {
               .filter(v => v.loc === 1)
               .map(item => (
                 <div className='A1_1row' key={item.id}>
-                  <img
-                    src={`${myInfo.serverUrl}/bwCN/myData/img/${item.id}s.jpg`}
-                    alt=''
-                    // onClick={() => history.push(`/scene/${item.id}`)}
+                  <Image
+                    lazy
                     onClick={() => openPage(item.link)}
+                    src={`${myInfo.serverUrl}/bwCN/myData/img/${item.id}s.jpg`}
+                    placeholder={<div className='imgLoding1'>加载中...</div>}
                   />
                   <div className='A1_1row1'>{item.name}</div>
                   <div className='A1_1row2'>{item.partOf}</div>