Как предварительно выбрать изображение, используя встроенный механизм Vue - PullRequest
Новая
       10

Как предварительно выбрать изображение, используя встроенный механизм Vue

0 голосов
/ 14 января 2019

У меня есть приложение с 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">

Редактировать: Мне удалось предварительно выбрать изображения, как предложил Рой Дж в комментариях:

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> теги. Это также требует больших усилий, и я считаю, что это плохая практика.

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Поскольку плагин уже включен в VueJS, я думаю, что вы должны изменить его с помощью chainWebpack .

Согласно документации плагина предварительной загрузки , вам также следует установить для параметра include значение allAssets .

В Webpack очень часто используются такие загрузчики, как file-loader, для генерировать ресурсы для определенных типов, таких как шрифты или изображения. если ты если вы хотите предварительно загрузить эти файлы, вы можете использовать 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-код 

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico> <title>vue-preload-images</title>
    <link href=/css/app.0b9b292a.css rel=preload as=style>
    <!-- Here is the logo image -->
    <link href=/img/logo.82b9c7a5.png rel=preload as=image>
    <link href=/js/app.30d3ed79.js rel=preload as=script>
    <link href=/js/chunk-vendors.3d4cd4b5.js rel=preload as=script>
    <link href=/css/app.0b9b292a.css rel=stylesheet>
</head>

<body><noscript><strong>We're sorry but vue-preload-images doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.3d4cd4b5.js> </script> <script src=/js/app.30d3ed79.js> </script> </body> </html>

Я надеюсь, что это сработает для вас.

0 голосов
/ 19 февраля 2019

Решение 1.

Когда пользователь нажимает кнопку, вы визуализируете свое изображение в невидимом состоянии.

В случае события load вы плавно выполняете переход.

Если загрузка изображения обычно занимает более 2 секунд, рассмотрите возможность предоставления пользователю визуальной подсказки, что нажатие кнопки было записано, а данные - должно произойти.

Это было бы технически правильное решение.

Решение 2 .

Альтернатива, широко используемая в производственных средах (и не имеющая ничего общего с Vue per se), заключается в загрузке миниатюр изображений на странице (например, в 10 раз меньше, что в ~ 100 раз меньше по размеру). , являясь областями). Это может быть неочевидно, но они очень хорошо заменяют большие, хотя переход еще продолжается - вы также можете поэкспериментировать с фильтром CSS blur на них.

Миниатюра и большое изображение должны быть идеально наложены друг на друга в одном переходном родительском элементе, а большой - внизу. На событии load в большой версии исчезает миниатюра, вызывая эффект фокусировки: едва заметный эффект.
Довольно забавным преимуществом этого метода является то, что, если вы оставляете большие пальцы сверху (с opacity: 0), всякий раз, когда кто-то пытается загрузить изображение, он щелкает правой кнопкой мыши по большому пальцу и не понимает, почему он загружает его с такой низкой скоростью. Рез.

Все почти одинаково (с точки зрения анимации) с добавлением эффекта фокусировки на изображение, когда оно действительно загружается.

Не СУХОЙ, но эффективный. Выглядит профессионально, кажется, что все загружается мгновенно и гладко. В целом, он преобразует гораздо больше, чем другие «правильные» решения. Именно поэтому он обычно используется на веб-сайтах, где производительность страницы важна.

При работе с визуальными эффектами быть совершенным - выглядеть идеальным (а в UX чувствовать / казаться идеальным).
Древние греки согнули свои колонны, чтобы при взгляде снизу они выглядели прямо.

...