function importAll (r) {
return r.keys().map(r)
}
loadImage (url) {
var img = new window.Image()
img.onload = img.onerror = () => {
this.loaded++
this.checkLoadComplete()
}
img.src = url
},
checkLoadComplete () {
this.percent = Math.floor(this.loaded / this.total * 100)
if (this.percent > 100) {
this.percent = 100
}
if (this.loaded === this.total) {
this.loadComplete()
}
},
loadComplete () {
this.$refs.enterVideo.play()
setTimeout(() => {
this.moveIn()
}, 2500)
},
startLoad () {
let imgs = importAll(require.context('@/img/pc/index/', false, /\.(png|jpe?g|svg)$/))
this.total = imgs.length
this.loaded = 0
for (let i = 0; i < this.total; i++) {
this.loadImage(imgs[i])
}
},
图片预加载
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- js懒加载 意义 懒加载(LazyLoad)是前端优化的一种有效方式,能极大的提升用户体验,图片加载是其重点,如果...
- 懒加载:懒加载即延迟,对于图片过多的页面,为了加快页面加载速度,我们需要将页面内未出现在可视区域内的图片先不做加载...
- 图片的http请求,有很多种情况,那么究竟什么情况下面不会发生请求呢?下面我用案例一一列举一下,希望对你深入了解h...