tvuy
前端工程师
|
.
获得徽章 0
#每天一个知识点# ```
function importAll(r: RequireContext) {
return r.keys().map(r).filter((item: string) => item.includes('popup'));
}
// 预加载图片
const images = importAll(require.context('./assets/images/myLikeList/', false, /\.(png|jpe?g|svg)$/));
// images 为类似import引进的图片集合
1、第一种方式加载图片
images.forEach((image: string) => {
const img = new Image()
img.src = image;
img.onload = () => {
console.log('图片加载完成')
}
})
2、第二个采用dom
<img v-for="(item, index) in images" :src="item" :key="index" style="display: none" />
```
我的问题是：请问这两种方法有什么不同吗？现象是 采用第一种方式的，图片还是会重新加载，而采用第二种的没有。
function importAll(r: RequireContext) {
return r.keys().map(r).filter((item: string) => item.includes('popup'));
}
// 预加载图片
const images = importAll(require.context('./assets/images/myLikeList/', false, /\.(png|jpe?g|svg)$/));
// images 为类似import引进的图片集合
1、第一种方式加载图片
images.forEach((image: string) => {
const img = new Image()
img.src = image;
img.onload = () => {
console.log('图片加载完成')
}
})
2、第二个采用dom
<img v-for="(item, index) in images" :src="item" :key="index" style="display: none" />
```
我的问题是：请问这两种方法有什么不同吗？现象是 采用第一种方式的，图片还是会重新加载，而采用第二种的没有。
展开
评论
点赞
github.com
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章