<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>在这个代码基础上优化成排队下载图片，只有上一个图片加载完再发起下一个图片请求

可以通过将图片的 src 存入一个数组中，然后使用一个变量来记录当前是否正在加载图片，实现图片的排队下载。

具体实现可以参考以下代码：

<template>
<div>
<img
v-for="(imgSrc, index) in imgSrcs"
:key="index"
:src="imgSrc"
ref="observe"
width="100%"
height="100%"
style="object-fit: contain;"
/>
</div>
</template>

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

export default {
name: "",
props: {
imgSrcs: {
require: true,
type: Array,
},
},
data() {
return {
isLoading: false,
};
},
components: {},
created() {},
updated() {},
mounted() {
this.loadNextImage();
},
methods: {
loadNextImage() {
if (this.isLoading || this.imgSrcs.length === 0) {
return;
}
const img = this.$refs.observe[this.$refs.observe.length - this.imgSrcs.length];
this.isLoading = true;
this.fetchAndDecryptImage(img)
.then(() => {
this.isLoading = false;
this.imgSrcs.shift();
if (this.imgSrcs.length > 0) {
this.loadNextImage();
}
})
.catch(() => {
this.isLoading = false;
img.src = "@/assets/img/yes_bg.svg";
});
},
fetchAndDecryptImage(img) {
return urlToBuffer(img.src).then((src) => {
img.src = src;
});
},
},
computed: {},
watch: {},
};
</script>

<style scoped></style>

在这个代码中，我们使用了一个数组来存储图片的 src，然后使用一个变量 isLoading 来记录当前是否正在加载图片。在 mounted 生命钩子中，我们调用 loadNextImage 方法来加载第一张图片，这个方法会检查当前是否正在加载图片，如果正在加载则不会继续加载下一张图片，如果当前没有正在加载图片，则会取出下一张图片的元素并调用 fetchAndDecryptImage 方法来下载并解密图片。如果下载成功，则将 isLoading 置为 false，并且从数组中移除当前这张图片的 src，然后再次调用 loadNextImage 方法来加载下一张图片。如果下载失败，则将 isLoading 置为 false，并将当前这张图片的 src 设置为默认图片。