在媒体资源较多的情况下渲染页面,即使采用了CDN,但如果客户端受带宽限制,资源的加载会很慢。页面资源(通常是图片)加载慢会影响动画效果,甚至使页面看起来很卡顿。 为了解决这一问题,可以使用预加载的方式,在页面打开之前,提前将其所需的资源加载到浏览器缓存。 在Vue中,可以将预加载的操作放在合适的生命周期钩子函数内,比如在前一个组件挂载后就加载后一个组件所需的资源。以下是Vue3组合式api写法。
setup() {
const imgList = [
"https://cdn.example.com/1.jpg",
"https://cdn.example.com/2.jpg",
"https://cdn.example.com/3.jpg",
"https://cdn.example.com/4.jpg",
];
//图片预加载
const loadImg = (imgList) => {
for (let i = 0; i < imgList.length; i++) {
let img = new Image()
let currentSrc = ''
img.src = imgList[i]
img.onload = function (e) {
//二次缓存,主要针对带中文的图片链接
if (currentSrc.length === 0) {
currentSrc = this.currentSrc
img.src = currentSrc
console.log('二次缓存');
}
console.log('加载完毕', e, this.currentSrc);
}
img.onerror = function (e) {
console.log('加载错误', e);
}
}
}
onMounted(() => {
loadImg(imgList);
})
return {
loadImg,
imgList,
onMounted
};
},
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=19ip817zxnl5s
Q.E.D.