• Vue.js

Vue.jsですべてのページ要素が読み込み完了した後に任意のイベントを実行する方法

Vue.jsですべてのページ要素（CSS・画像を含む）が読み込み完了した後に任意のイベントを実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

Vue.jsで読み込み完了を検知するコード例

const app = Vue.createApp({
  el: "#app",
  data() {
    return {
    };
  },
  mounted() {
    window.onload = () => {
      alert("ページが読み込まれました");
    };
  },
});
app.mount("#app");

読み込み完了後に任意のイベントを実行するコード例です。

ページ読み込みが完了した後にアラートがでる仕組みになってます。

まずDOM要素が読み込まれた直後という処理をmountedメソッドを使って定義します。

さらにmountedメソッド内でwindow.onload関数を定義。

上記によってDOM要素・CSS・画像を含むすべてのページ要素が読み込まれた後という処理を実行できます。

あとは関数内で任意のイベント関数を実行すればOKです。

以上で実装完了です。

まとめ

Vue.jsですべてのページ要素（CSS・画像を含む）が読み込み完了した後に任意のイベントを実行する方法について紹介しました。

以上で解説を終わります。