8个图片资源的url,已经存储在数组中,任何时刻同时下载的链接数量不可以超过3个,要求尽可能快速地将所有图片加载完成
图片加载
function loadImg(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function() {
console.log(url);
resolve(img);
};
img.onerror = function() {
reject(new Error('Could not load image at' + url));
};
img.src = url;
});
}
先加载3张图片,有图片加载完成,就马上加载下一张,直到加载8张完为止
function load(arr) {
let urls = arr
let load_index = -1 // 加载图片的下标 0,1, 2, 3 ... 7
function limitLoad(num) {
if (load_index >= urls.length - 1) return
for (let i = 0; i < num; i++) { // 可以加载几张图片
load_index++ // 图片开始加载
loadImg(urls[load_index]).finally(() => {
limitLoad(1) // 图片加载成功或失败,都会加载下一张
})
}
}
limitLoad(3)
}
load(urls)
2个请求返回同一数据,先加载快的, 慢的在追加数据。
waitLoading.all = true
const f_p = xxx().then(({data}) => {
...
...
}).finally(() => {
if (workTodoList.value.length != 0) {
waitLoading.all = false
}
})
const o_p = xxx().then(({data}) => {
...
...
}).finally(() => {
if (workTodoList.value.length != 0) {
waitLoading.all = false
}
})
Promise.all([f_p, o_p]).finally(() => {
if (workTodoList.value.length == 0) {
waitLoading.all = false
}
})