1

utils/plugin/LazyImage.ts

+const vImage = {
+  mounted: async (el: HTMLImageElement) => {
+    // let imgURL = el.src; //获取图片地址
+    // if (imgURL) {
+    //   let copyNode = el.cloneNode(true);
+    //   // 给一个默认图片
+    //   let defaultImg = "/images/img/empty.png";
+    //   copyNode.src = defaultImg;
+    //   // 在头部添加一个gif加载动画
+    //   let parent = el.parentNode;
+    //   parent?.insertBefore(copyNode);
+    //   el.style.display = "none";
+    //   el.onerror = () => {
+    //     el.src = defaultImg;
+    //   };
+    // }
+  },
+};
+
+export default vImage;

utils/plugin/PopupTool.ts

-import { Add } from "./PopupTool_Interface";
+import { Add } from "../pluginInterface/PopupTool_Interface";
 
 /**
  *

views/token/avatar.vue

@@ -18,8 +18,8 @@ const props = withDefaults(
     height?: string;
   }>(),
   {
-    width: '30px',
-    height: '30px',
+    width: "30px",
+    height: "30px",
   }
 );
 // 获取token首字母
@@ -28,12 +28,12 @@ const getTokenInitials = () => {
   if (value) {
     return value[0];
   }
-  return '';
+  return "";
 };
 </script>
 
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .avatar-icon {
   border-radius: 50%;
   background: #5f6e78;
@@ -41,7 +41,7 @@ const getTokenInitials = () => {
   .dja();
   font-weight: 500;
   font-size: 17px;
-  font-family: 'Medium';
+  font-family: "Medium";
   margin-right: 12px;
 }
 </style>

views/token/rightDetailHeader.vue

@@ -6,7 +6,7 @@
           <div class="left-token-name">
             <div class="token-name-child">
               <template v-if="getImg">
-                <img :src="getImg" alt="swap" />
+                <img :src="getImg" alt="swap" v-image />
               </template>
               <template v-else>
                 <AvatarVue
@@ -19,7 +19,7 @@
             </div>
             <div class="address-info">
               <span class="address-info-item">
-                <span>{{ $t('TableList.token') }}</span>
+                <span>{{ $t("TableList.token") }}</span>
                 <span class="address">：{{ tokenInfo.tokenSub }}</span>
                 <span @click="doCopy(tokenInfo.token)">
                   <CopySvg></CopySvg>
@@ -28,7 +28,7 @@
             </div>
             <div class="address-info margin">
               <span class="address-info-item">
-                <span>{{ $t('TableList.pool') }}</span>
+                <span>{{ $t("TableList.pool") }}</span>
                 <span class="address">：{{ tokenInfo.tbnameSub }}</span>
                 <span @click="doCopy(tokenInfo.n_tb)">
                   <CopySvg></CopySvg>
@@ -75,15 +75,16 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import CopySvg from '/public/images/svg/rightDetail/copy.svg';
-import useCopy from '@/hooks/useCopy';
-import * as Cache from '@/utils/cache';
-import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
-import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
-import { parseCoinAmount } from '@/utils/tool';
-import AvatarVue from './avatar.vue';
+import { defineComponent, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import CopySvg from "/public/images/svg/rightDetail/copy.svg";
+import useCopy from "@/hooks/useCopy";
+import * as Cache from "@/utils/cache";
+import CollectionSvg2 from "/public/images/svg/rightDetail/colection2.svg";
+import CollectionSvg3 from "/public/images/svg/rightDetail/collection-yes.svg";
+import { parseCoinAmount } from "@/utils/tool";
+import AvatarVue from "./avatar.vue";
+import vImage from "@/utils/plugin/LazyImage";
 const props = defineProps<{
   tokenInfo: any;
   numR24h: string;
@@ -92,7 +93,7 @@ const props = defineProps<{
   tb: string;
   currentPath: string;
 }>();
-const emit = defineEmits(['update:isInCollection']);
+const emit = defineEmits(["update:isInCollection"]);
 const { t } = useI18n();
 // 收藏表格是否更新
 const CollectionCl = CollectionChange();
@@ -101,19 +102,19 @@ const getPrice = () => {
   try {
     const { tokenInfo } = props;
     if (tokenInfo) {
-      if ('up' in tokenInfo) {
+      if ("up" in tokenInfo) {
         let up = parseCoinAmount(tokenInfo.up);
-        if (up.indexOf('{') !== -1) {
+        if (up.indexOf("{") !== -1) {
           up = up.slice(0, up.length - 2);
         }
         return up;
       } else {
-        return '';
+        return "";
       }
     }
   } catch (e) {
     console.log(e);
-    return '';
+    return "";
   }
 };
 const collectData = () => {
@@ -126,24 +127,24 @@ const collectData = () => {
         },
       ]);
     }
-    emit('update:isInCollection', false);
+    emit("update:isInCollection", false);
   } else {
     Cache.setCollection({
       hash: tb,
       symbol: tokenInfo.symbol,
       path: currentPath,
     });
-    emit('update:isInCollection', true);
+    emit("update:isInCollection", true);
   }
   // 通知select中的收藏数据更新
   CollectionCl.value += 1;
 };
 const r24hColor = () => {
   if (props.r24h) {
-    if (props.r24h[0] === '-') {
-      return '#f85260';
+    if (props.r24h[0] === "-") {
+      return "#f85260";
     } else {
-      return '#23ab94';
+      return "#23ab94";
     }
   }
 };
@@ -151,21 +152,21 @@ const getImg = computed(() => {
   const { tokenInfo } = props;
   try {
     if (Object.keys(tokenInfo).length) {
-      if ('chat' in tokenInfo) {
+      if ("chat" in tokenInfo) {
         return tokenInfo.chat.img;
       } else {
-        return '';
+        return "";
       }
     }
   } catch (e) {
     console.log(e);
-    return '';
+    return "";
   }
 });
 </script>
 
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .header-token-box {
   margin-top: -1px;
   box-sizing: border-box;
@@ -209,7 +210,7 @@ const getImg = computed(() => {
             display: block;
             text-overflow: ellipsis;
             white-space: nowrap;
-            font-family: 'bold';
+            font-family: "bold";
           }
           img {
             width: 38px;
@@ -227,7 +228,7 @@ const getImg = computed(() => {
         .address-info {
           display: flex;
           color: var(--new-color-7);
-          font-family: 'Regular';
+          font-family: "Regular";
           margin-top: 1px;
           .address-info-item {
             font-size: var(--font-size);
@@ -260,7 +261,7 @@ const getImg = computed(() => {
             font-weight: 700;
             font-size: 28px;
             min-height: 50px;
-            font-family: 'bold';
+            font-family: "bold";
             color: var(--td-Search-info-color-1);
           }
           .r24h-cl {
@@ -268,7 +269,7 @@ const getImg = computed(() => {
             font-weight: normal;
             margin-top: -3px;
             text-align: right;
-            font-family: 'Medium';
+            font-family: "Medium";
           }
         }
         .kline-btn {