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

■ はじめに

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

目次

【1】vue-intersect とは?
 使用目的
 イベント
【2】環境設定
【3】サンプル

【1】vue-intersect とは?

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

使用目的

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

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

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

イベント

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

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

【2】環境設定

npm install vue-intersect --save

【3】サンプル

<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