注意动画效果的实现！！！
<style>
body{
padding-bottom: 800px;
}
img{
width: 400px;
height: 400px;
border: 1px solid #dedede;
}
/* 骨架屏 loading */
img[v-preload],.preload{
background-color: #dedede;
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 10%,rgba(255,255,255,0) 20%);
background-size: 230% 100%;
background-position: 30% 0%;
animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
0%{
background-position: 30% 0%;
}
100%{
background-position: -100% 0%;
}
}
</style>
</head>
<body>
<div id="app">
<img v-preload=" img " style="object-fit:cover">
</div>
<script type="module">
import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
const app = createApp({
data(){
return {
img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1112%2F11251Q24100%2F1Q125124100-5.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665718104&t=91a061cac8657bf9b1bc3ead30017584"
}
}
})
app.directive("preload", function(el,binding){
if(binding.value==binding.oldValue) return;
el.classList.add("preload")
let imgDom = new Image();
imgDom.src = binding.value;
imgDom.onload = function(){
// console.log("图片加载完成");
el.src = binding.value;
el.classList.remove("preload")
}
})
app.mount("#app")
</script>