vue3+ts实现图片预加载
时间: 2023-07-25 13:08:19 浏览: 53
实现图片预加载可以提升网页性能和用户体验。下面是使用 Vue3 + TypeScript 实现图片预加载的示例代码:
1.首先在组件中定义一个数组,用于存储需要预加载的图片路径。
```typescript
export default defineComponent({
data() {
return {
imgList: [
"https://example.com/image1.jpg",
"https://example.com/image2.jpg",
"https://example.com/image3.jpg",
],
};
},
});
```
2.在组件的 `mounted` 钩子函数中,使用 `Promise.all` 方法创建多个 Promise 对象,用于加载所有图片。
```typescript
export default defineComponent({
mounted() {
const promises = this.imgList.map((src) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve();
};
img.onerror = (e) => {
reject(e);
};
img.src = src;
});
});
Promise.all(promises)
.then(() => {
console.log("All images loaded successfully.");
})
.catch((e) => {
console.error("Failed to load image: ", e);
});
},
});
```
3.在模板中使用 `v-for` 指令循环展示预加载的图片。
```html
<template>
<div>
<img v-for="(src, index) in imgList" :key="index" :src="src" />
</div>
</template>
```
这样就完成了使用 Vue3 + TypeScript 实现图片预加载的示例代码。