Vue.jsでのプログレッシブ画像の読み込み

投稿日: 2022-04-20 2022-10-09
タグ: Vue.js

Mediumに時間を費やしたことがある場合（そして、あなたが開発者であることを私は知っています）、おそらく少なくとも彼らの画像読み込み技術に気づいたでしょう。最初に非常に低解像度の画像が読み込まれ、次にプレースホルダーとして非常にぼやけた状態でクライアントに表示されます。フル解像度の画像が読み込まれると、プレースホルダーがフェードアウトして表示されます。結果として生じる遷移は非常にスムーズで、目には簡単です。

（この手法と代替案について詳しく知りたい場合は、以下をご覧ください。 JoséMによるこの投稿。ペレス。）

もちろん、この効果を実装するVue用のプラグイン（ @ccforward による）があることがわかります。

インストール

YarnまたはNPMを使用してVue.jsプロジェクトにprogressive-imageをインストールします。

# Yarn
$ yarn add progressive-image
# NPM
$ npm install progressive-image --save

最初にページにCSSをインポートする必要があります。好きな方法を使用してください。（最も基本的な方法は直接インポートです。）

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

次に、アプリのメインファイルで、 ProgressiveImage プラグイン。

main.js

import Vue from 'vue';
import ProgressiveImage from 'progressive-image/dist/vue'
import App from 'App.vue';

Vue.use(ProgressiveImage, {
  removePreview: true
});

new Vue({
  el: '#app',
  render: h => h(App)
});

使用法

そこから、コンポーネントにプレビューを追加するのは簡単です。フルサイズの低解像度の画像がすでに用意されていると仮定すると、

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png"/>
    </div>

  </div>
</template>

バインディングは完全にサポートされているため、配列またはデータセットから画像をレンダリングするのも簡単です。

ボーナス：srcsetのサポート。

追加のボーナスとして、プログレッシブイメージは、レスポンシブイメージのsrcsetの使用をサポートします。（それが何であるかよくわからない場合は、このテーマに関するすばらしい記事をご覧ください。）

データ属性またはバインディングを介して直接使用できます。

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png" data-srcset="./example.jpg 1x, ./[email protected] 2x"/>
    </div>

  </div>
</template>

超シンプルで見栄えの良いレスポンシブ画像を楽しんでください！

getdocs

13036