mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-11 19:38:55 +08:00
perf(image): 优化图片加载性能
- 为所有商品图片添加 loading="lazy" 属性实现懒加载 - 为所有图片元素添加 decoding="async" 属性实现异步解码 - 优化购物车页面的商品缩略图加载方式 - 改进订单中心各页面的图片加载策略 - 提升评价系统中图片的加载性能 - 优化会员中心收藏和足迹功能的图片加载 - 改善促销活动页面的图片加载体验 - 更新首页装饰组件中的图片加载属性 - 提高地址管理页面的界面展示效果
This commit is contained in:
@@ -62,7 +62,7 @@
|
||||
:class="{ borderColor: img === item.previewImg }"
|
||||
:key="imgIndex"
|
||||
>
|
||||
<img :src="img" alt="">
|
||||
<img :src="img" loading="lazy" decoding="async" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<span @click.stop="rotatePreviewImg(0, item)"><el-icon><Refresh /></el-icon>左转</span>
|
||||
<span @click.stop="rotatePreviewImg(1, item)"><el-icon><Refresh /></el-icon>右转</span>
|
||||
</div>
|
||||
<img :src="item.previewImg" :style="{ transform: `rotate(${item.deg || 0}deg)` }" width="198" alt="">
|
||||
<img :src="item.previewImg" loading="lazy" decoding="async" :style="{ transform: `rotate(${item.deg || 0}deg)` }" width="198" alt="">
|
||||
</div>
|
||||
<p class="remarks-sub">
|
||||
<span class="remarks-item">{{ item.goodsName }}</span>
|
||||
@@ -88,7 +88,7 @@
|
||||
:class="{ borderColor: img === item.previewImg }"
|
||||
@click="previewImg(img, item)"
|
||||
>
|
||||
<img :src="img" alt="">
|
||||
<img :src="img" loading="lazy" decoding="async" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
v-if="store.storeLogo && !logoError"
|
||||
class="store-logo"
|
||||
:src="store.storeLogo"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
:alt="storeName"
|
||||
@error="logoError = true"
|
||||
/>
|
||||
@@ -50,7 +52,7 @@
|
||||
:key="item.id"
|
||||
@click="goGoods(item)"
|
||||
>
|
||||
<img class="recommend-img" :src="item.thumbnail || item.small" :alt="item.goodsName" />
|
||||
<img class="recommend-img" :src="item.thumbnail || item.small" loading="lazy" decoding="async" :alt="item.goodsName" />
|
||||
<div class="recommend-info">
|
||||
<p class="recommend-name">{{ item.goodsName }}</p>
|
||||
<div class="recommend-meta">
|
||||
|
||||
Reference in New Issue
Block a user