【Vue】vue-intersect / 遅延ロード

■ はじめに

vue-intersect ってのを扱う可能性があるのでメモ。

目次

【１】vue-intersect とは？
　使用目的
　イベント
【２】環境設定
【３】サンプル

【１】vue-intersect とは？

* Intersection Observer API を使った遅延ロードするVueコンポーネント
 => 画面内に表示された画像だけリクエストが走るようにして
　　パフォーマンス向上を行う

使用目的

Intersection Observer API (交差監視 API) のページ

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

より抜粋
~~~~~~~~~~~~~
１）ページがスクロールした際の画像やその他のコンテンツの遅延読み込み。
２）「無限スクロール」をするウェブサイトを実装し、
　　スクロールに従って次々とコンテンツを読み込んで、
　　ユーザーがページの切り替えをせずに済むようにすること。
３）広告費用を計算するための広告が表示されたかどうかのレポート。
４）ユーザーが見るかどうかによって、タスクを実行するかどうか、
　　アニメーションを処理するかを決定すること。
~~~~~~~~~~~~~

イベント

イベント名	引数	説明
change	IntersectionObserverEntry	対象エレメントに変更があった際にイベント発火
enter	IntersectionObserverEntry	対象エレメントが表示画面内に入った際にイベント発火
leave	IntersectionObserverEntry	対象エレメントが表示画面上に外れた際にイベント発火
destroyed	None	対象エレメントがなくなった際にイベント発火

IntersectionObserverEntry
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserverEntry

【２】環境設定

npm install vue-intersect --save

【３】サンプル

<template>
  <div>
    <div>↓</div>
    <div>・・・コピー＆ペーストして・・・</div>
    <div>↓</div>
    <intersect @enter="onIntersected()" @leave="onLeave()">
      <div>{{ msg }}</div>
    </intersect>
    <div>↑</div>
    <div>・・・コピー＆ペーストして・・・</div>
    <div>↑</div>
  </div>
</template>
<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'Here'
      }
    },
    methods: {
      onIntersected: function () {
        console.log('Intersected');
      },
      onLeave: function () {
        console.log('Not intersected');
      }
    } 
  }
</script>

参考文献

https://bnsgt.hatenablog.com/entry/2019/12/07/141439
https://zenn.dev/sengosha/articles/63a04ba5da5303e3993d

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
TypeScript + vue-intersect で遅延ロードを実装する
https://dk521123.hatenablog.com/entry/2021/02/03/233137