如何在 vue 项目中预加载图片
Posted
技术标签:
【中文标题】如何在 vue 项目中预加载图片【英文标题】:How to pre-load images on vue project 【发布时间】:2021-06-27 12:52:34 【问题描述】:我想加载页面上的所有图像以进行预加载(当路由更改时)。 我使用的所有图像都存储在本地。当我测试滚动时正在加载网络图像。我需要在页面装载而不是滚动上加载图像。
<div class="text-center" style="margin-top: 10vh;">
<v-layout row wrap justify-center>
<v-flex
md12
align-self-center
data-aos-easing="linear"
data-aos-delay="100"
data-aos="fade-up"
data-aos-duration="1500"
>
<v-img
contain
src="../assets/chamika_house/_SDS3575.jpg"
></v-img>
</v-flex>
</v-layout>
</div>
<div style="width:99vw;height:36vh;padding:10px"></div>
<div>
<v-img
contain
src="../assets/chamika_house/_SDS3429.jpg"
data-aos="fade-up"
data-aos-easing="linear"
data-aos-delay="100"
data-aos-duration="1500"
></v-img>
</div>
【问题讨论】:
【参考方案1】:<v-img>
有一个 eager
prop 可以禁用延迟加载:
<v-img eager />
【讨论】:
是的,滚动加载称为“延迟加载”。以上是关于如何在 vue 项目中预加载图片的主要内容,如果未能解决你的问题,请参考以下文章