背景
在写项目时,加载图片未成功前,会出现空白页面,太影响美观和体验感
解决方案
1. element ui通过slot占位符解决
2. 自定义指令
原生img
标签可以通过自定义指令解决,img标签有onload和onerror事件,都是在渲染成功后才出发,想占位要在渲染前触发
html
<template>
<img
class="image_item-img"
v-preload="'loading'"
src="https://xx"
alt="加载失败"
/>
</template>
<script setup>
import { reactive } from 'vue'
// 自定义图片占位
const vPreload = {
//未渲染img标签前
beforeMount(el, binding) {
el.style.backgroundColor = '#ececec'
el.classList.add(binding.value) //binding.value是上面传过来'loading',我自定义的类名(可自己定义loading样式)
},
mounted(el, binding) {
el.addEventListener('error', () => {
el.classList.remove(binding.value)
})
},
}
</script>
3.用图片代替
html
<img
class="image_item-img"
v-for="(item, index) in imageList"
:key="item.id"
:src="item.url ? require('/src/assets/logo.png') : item.url"
alt="加载失败"
@click="handlePreview(index)"
/>