Javascript 如何使用Vue'；s内置机制

我有一个带有Vue CLI的应用程序。当应用程序加载时，我有一堆图像，当用户单击按钮时，这些图像会出现一个过渡。问题是，当用户单击一个按钮时，相应的图像才开始加载，这意味着大部分动画在此之前都已完成。这使得体验变得相当不稳定，因为图像在过渡期间突然弹出，取代了其他元素。我想在网站加载时预取它们

建议使用

图像

类。然而，据该网站称，Vue内部使用自己的插件来实现这一点，而且显然是这样

我尝试对其进行配置，以便其预加载图像：

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（）

加载图像，这意味着它们通过网页包。例如：

<img :src="require('../assets/img/' + img)" draggable="false">

---

然而，这并不是我实际问题的答案——它没有通过

标记使用资源提示。它还需要更多的努力，我认为这是一种不好的做法。

解决方案1。

当用户单击该按钮时，将以不可见状态渲染图像

在图像的

load

事件中，您可以平稳地执行转换

如果图像加载通常需要超过2秒，考虑给用户一个视觉线索，按钮点击<强> <>强>记录，<>强> <>强>即将发生。

这将是技术上正确的解决方案

---

解决方案2

另一种在生产环境中广泛使用的方法（与Vue本身无关）是在页面中加载图像的缩略图（如缩小10倍，即缩小约100倍的区域）。这可能并不明显，但它们可以很好地替代大型的，而过渡正在进行中-您可能还想在它们上试验CSS

blur

filter

缩略图和大图像必须完全重叠，在同一个过渡父对象中，大图像在下面。在加载大型版本时，将缩略图淡出，从而产生一种效果：一种微妙的吸引眼球的效果。
这种方法的一个相当有趣的额外功能是，如果你把拇指放在上面（不透明度为0），每当有人试图下载图像时，他们右键单击拇指，很难理解为什么要以如此低的分辨率下载

当图像实际加载时，在图像上添加了一个有效的焦点，这一切（就动画而言）几乎都是一样的

不干燥，但效率高。看起来很专业，所有东西似乎都能立即顺利加载。总的来说，它比其他“正确”的解决方案更能转变方向。这就是为什么它通常用于页面性能非常重要的网站

---

在处理视觉效果时，完美就是看起来完美（在用户体验中，感觉/看起来完美）。

---

古希腊人将他们的柱子弯曲，这样当从下面观看时，他们看起来是笔直的。

因为VueJS已经包含了这个插件，我想你必须用它来修改它

根据preload webpack插件，您还应该将include选项设置为'allAssets'值

在网页包中，使用诸如文件加载器之类的加载器来 为特定类型（例如字体或图像）生成资源。如果你 如果还希望预加载这些文件，可以使用包含值 所有资产

因此，配置如下所示：

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('preload').tap(options => {
            options[0].as = (entry) => {
                if (/\.css$/.test(entry)) return 'style';
                if (/\.woff$/.test(entry)) return 'font';
                if (/\.png$/.test(entry)) return 'image';
                return 'script';
              }
            options[0].include = 'allAssets'
            // options[0].fileWhitelist: [/\.files/, /\.to/, /\.include/]
            // options[0].fileBlacklist: [/\.files/, /\.to/, /\.exclude/]
            return options
        })
    }
}

通过全新的Vue cli安装，我生成了以下HTML

vue预加载图像
很抱歉，如果未启用JavaScript，vue预加载图像无法正常工作。请使其继续。

---

我希望它对您有用。

您链接到的Vue文档似乎建议您这样做。是的，如果我想硬编码预回迁元标记。我有一个应该这样做的构建系统，我想让它满意。如果我将标记放在我的

index.html

中，图像将不会通过Vue或Webpack。另外，它不能处理动态资产，因为它们的文件名是散列的。你能将图像包含在

标记中不可见的地方吗？我想我可以，但我认为这是一个糟糕的解决方案？首先，我需要复制

标记，它不是干的。第二，路径是动态的，这使得事情变得更加复杂。当然，你会使img标签动态，就像可见的标签一样。

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('preload').tap(options => {
            options[0].as = (entry) => {
                if (/\.css$/.test(entry)) return 'style';
                if (/\.woff$/.test(entry)) return 'font';
                if (/\.png$/.test(entry)) return 'image';
                return 'script';
              }
            options[0].include = 'allAssets'
            // options[0].fileWhitelist: [/\.files/, /\.to/, /\.include/]
            // options[0].fileBlacklist: [/\.files/, /\.to/, /\.exclude/]
            return options
        })
    }
}