<template> <img :src="imgSrc" ref="observe" width="100%" height="100%" style=" object-fit:contain;" /> </template> <script> import { urlToBuffer } from "@/utils/utils"; export default { name: "", props: { imgSrc: { require: true, type: String, }, }, data() { return { observer: null, }; }, components: {}, created() { this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // 如果图片进入了可视区域，下载并解密图片 this.fetchAndDecryptImage(entry.target); entry.target.src = require("@/assets/img/yes_bg.svg"); // 解密后取消观察 this.observer.unobserve(entry.target); } }); }); // this.$nextTick(() => { this.observer.observe(this.$refs.observe); }); }, updated() {}, mounted() {}, methods: { fetchAndDecryptImage(img) { // 获取图片的加密数据 urlToBuffer(img.src) .then((src) => { img.src = src; }) .catch((error) => { img.src = "@/assets/img/yes_bg.svg"; }); }, }, computed: {}, watch: {}, }; </script> <style scoped> </style>在这个代码基础上优化排队下载图片，只有上一个图片加载完再发起下一个图片请求

可以使用 Promise 和 async/await 来实现图片的串行加载。具体实现如下：

1. 在 data 中添加一个队列数组 queue，用于存放需要加载的图片链接。

2. 在 mounted 钩子函数中调用序列加载方法。

3. 在序列加载方法中循环遍历队列数组，依次加载图片。每个图片加载完成后再加载下一个图片。

4. 在 fetchAndDecryptImage 函数中返回一个 Promise 对象，并在函数内部 resolve 解密后的图片链接。

修改后的代码如下：

<template>
<img
:src="imgSrc"
ref="observe"
width="100%"
height="100%"
style="object-fit: contain;"
/>
</template>

<script>
import { urlToBuffer } from "@/utils/utils";

export default {
name: "",
props: {
imgSrc: { require: true, type: String },
},
data() {
return {
observer: null,
queue: [], // 存放需要加载的图片链接
};
},
components: {},
created() {},
updated() {},
mounted() {
this.queue.push(this.imgSrc); // 将第一张图片加入队列
this.loadImagesInSequence(); // 调用序列加载方法
},
methods: {
async loadImagesInSequence() {
for (let i = 0; i < this.queue.length; i++) {
await this.fetchAndDecryptImage(this.queue[i]);
}
},
fetchAndDecryptImage(src) {
return new Promise((resolve, reject) => {
urlToBuffer(src)
.then((buffer) => {
const decryptedSrc = this.decrypt(buffer);
this.$refs.observe.src = decryptedSrc;
this.queue.shift(); // 加载完成后从队列中移除该图片链接
resolve();
})
.catch((error) => {
console.error(error);
this.$refs.observe.src = "@/assets/img/yes_bg.svg";
this.queue.shift();
resolve();
});
});
},
decrypt(buffer) {
// 解密函数
// ...
return decryptedSrc;
},
},
};
</script>

<style scoped></style>