我有一个使用Vue CLI的应用程序。当应用程序加载时,我会有一堆图片在用户点击按钮时出现转换效果。问题是,当用户点击按钮时,相应的图片才开始加载,这意味着大部分动画都完成了。这会使体验变得很卡顿,因为图片突然在过渡期间弹出,挤压其他元素。我希望在站点加载时先预取它们。
这个答案建议使用Image
类。然而,根据Vue CLI文档,Vue在内部使用自己的插件preload-webpack-plugin,它显然可以配置。
我试图配置它以预加载图片:
vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'prefetch',
as (entry) {
if (/\.css$/.test(entry)) return 'style';
if (/\.woff$/.test(entry)) return 'font';
if (/\.png$/.test(entry)) return 'image';
return 'script';
}
})
]
}
}
这只会破坏最终的index.html
,导致其中没有构建脚本和样式。
如果我删除这行:
new HtmlWebpackPlugin(),
该网站仍然可以加载,但图像未进行预取操作。这与我在
vue.config.js
文件中未做任何操作相同。如何正确设置?
编辑:在Vue组件中,我使用require()
来加载图片,这意味着它们会通过Webpack进行处理。例如:
<img :src="require('../assets/img/' + img)" draggable="false">
编辑: 我能够像Roy J在评论中建议的那样预取图像:
在我的主组件中,PreloadImages.vue
:
<template>
<div style="display: none;">
<img :src="require('../assets/img/foo.png')">
<img :src="require('../assets/img/bar.png')">
<img :src="require('../assets/img/baz.png')">
</div>
</template>
然而,这并不是我实际问题的答案——它没有使用通过
<link>
标签的资源提示。它还需要更多的努力,我认为这是一种不好的做法。
<img>
标签中,放在不可见的地方吗? - Roy J<img>
标签,这不符合DRY原则。其次,路径是动态的,这使得事情变得更加复杂。 - dodovimg
变量是一个prop。我无法在组件外部访问该prop。此外,我不能将隐藏的<img>
放在组件内部,因为它会在组件挂载时加载图像,这是没有意义的。 - dodov