Vue图片预加载
场景:切换下一个组件前,需要预加载图片,同时图片链接有中文,往往有时候缓存匹配问题,中文没匹配上。上代码:loadImg(list) {console.log('list', list);for(let i = 0; i < list.length; i++) {let img = new Image()let currentSrc = ''img.src = list[i]img.onlo
·
场景:切换下一个组件前,需要预加载图片,同时图片链接有中文,往往有时候缓存匹配问题,中文没匹配上。
上代码:
loadImg(list) {
console.log('list', list);
for(let i = 0; i < list.length; i++) {
let img = new Image()
let currentSrc = ''
img.src = list[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);
}
}
}
参数 list 是一个存放图片链接的数组
字段 currentSrc 是浏览器编码后发给后端请求的图片链接
更多推荐
已为社区贡献5条内容
所有评论(0)