Merge pull request 'feat: 修改加载问题' (#240) from fix/updatesyspic into test

Reviewed-on: #240

src/views/home/content/Content.vue

@@ -117,19 +117,19 @@ const layout = debounce(() => {
   })
   loading.value = false
   // 暂时注释，请忽略
-  // _imagesload = imagesloaded('.grid-item')
+  _imagesload = imagesloaded('.grid-item')
 
-  // _imagesload.on('done', (instance) => {
-  //   (_masonry as any).layout()
-  //   if (!el.value)
-  //     return
-  //   loading.value = false
-  // })
+  _imagesload.on('done', (instance) => {
+    (_masonry as any).layout()
+    if (!el.value)
+      return
+    loading.value = false
+  })
 
-  // _imagesload.on('fail', (instance) => {
-  //   message.error('图片错误')
-  //   loading.value = false
-  // })
+  _imagesload.on('fail', (instance) => {
+    message.error('图片错误')
+    loading.value = false
+  })
 }, 300)
 
 useInfiniteScroll(
@@ -144,7 +144,7 @@ onUpdated(() => {
   nextTick(() => {
     setTimeout(() => {
       layout()
-    }, 2000)
+    }, 50)
   })
 })
 
@@ -739,19 +739,8 @@ defineExpose({
                 :preview-src="item.imgUrl"
                 :src="item.thumburl"
                 :fallback-src="bgLoadingImg"
-                style="display: none"
+                :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
               />
-              <img
-                v-lazy="item.thumburl" class="img" :class="{
-                  'img-fit': viewMode === 'horizontalVersion',
-                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                }" alt="" @click="
-                  ($event) => {
-                    previewHandler(index, $event);
-                    hideDownload($event);
-                  }
-                "
-              >
               <img
                 v-if="item.states == 3"
                 class="tag-status"