我有一个使用Vue.Js的小应用程序(使用webpack)。我有一个过渡部分。当用户点击按钮时,内容将发生变化。它是一个带有IMG子元素的简单DIV元素。我的问题是当用户点击按钮时,下一个图像将实时加载并且速度很慢,所以我需要预先加载这些图像。
我尝试了更多不同的方法,但无法预先加载图像。问题:
当显示页面时,只有第一个图像是DOM的一部分,因此不会加载其他图像。好的,这是正常行为。
我无法通过在图像数组(JavaScript Preloading Images)上使用简单的for循环来预加载图像,因为图像将由唯一的查询字符串()请求请求。因此预加载的图像名称将与请求的名称不匹配。
我尝试使用require()加载图像并将其绑定到IMG标记的scr属性。它也没有解决我的问题,当新的DIV插入DOM时,图像将在点击后实时加载。
我的简化单个文件compontent(.vue)看起来像这样:
<template>
<!-- [FIRST] -->
<div v-if="contentId == 0">
<transition
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
mode="out-in">
<img :src="images.firstScreenShot" key="firstImage">
</transition>
</div>
<!-- [/FIRST] -->
<!-- [SECOND] -->
<div v-else-if="contentId == 1">
<transition
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
mode="out-in">
<img :src="images.secondScreenShot" key="secondImage">
</transition>
</div>
<!-- [/SECOND] -->
</template>
<script>
export default {
data() {
return {
contentId: 0,
images: {
firstScreenShot: require('./assets/first-screen-shot.png'),
secondScreenShot: require('./assets/second-screen-shot.png'),
}
}
}
}
</script>
我是Vue.js的新手,也许我的做法并不好。请让我知道什么是好方法!
答案 0 :(得分:4)
我很快在浏览器中尝试了这个,但它似乎在控制台中工作。您可以使用Javascript Image对象预先加载图像:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
您可以像这样创建一个新的Image对象:
const image = new Image();
然后您可以为该图像指定src值:
image.src = 'test.jpg'
当您立即向src属性提供数据时,浏览器将触发网络请求,这足以使图像被加载和缓存。这样您就不必将这些图像插入DOM中。
如果我错了,有人会纠正我,但是没有尝试完全。
答案 1 :(得分:1)
如果您使用模板来加载带有标签的图像,则可以使用简单的HTML使用 rel =“ preload” 来预加载图像。
示例:
<img :src="images.secondScreenShot" key="secondImage" rel="preload">
答案 2 :(得分:1)
我创建了一个函数,只是通过参数发送要加载的图像对象。
在路由器中
import Digital from '../../images/digital';
import { loadImage } from '../LoadImage';
...
const router = new Router({
routes: [
{
path: '/',
name: 'welcome',
component: Welcome,
beforeEnter(to, from, next) {
loadImage(Digital);
}
}
]
我的功能
export function loadImage(imagesObject) {
Object.keys(imagesObject).map((key, index) => {
const img = new Image();
img.src = imagesObject[key];
});
}
希望有帮助