質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

vuetify(単一コンポーネント)でのloading画面が表示できない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 892

score 5

vuetify(単一コンポーネント)でのloading画面表示

以下のサイトのようにページに入った際にローディング画面を表示したいです。
https://littlethings.jp/blog/web/loading-animation
エラーは発生しないのですが,ローディング画面が表示できずロード中のページが見えてしまいます。

該当のソースコード

<template>
<div class="container-fluid">
  <div id="app" v-on:load="load" >
  <div id="loader-bf" class="is-hide">
    <div id="loader" class="is-hide">
      <img src="~/assets/img/logo.png" >
    </div>
  </div>
</div>

  <v-app light>
    <br>
 ・
 ・
 ・ 
 ・
  </v-app>
 </div>
</template>

<script>
export default{
    methods:{
    load:function(){
    var bf=document.getElementById('loader-bf');
    var loader=doucument.getElementById('loader');
    /*ロード画面の非表示を解除*/
    bf.classList.remove('is-hide');
    loader.classList.remove('is-hide');
    /*読み込み完了*/
    window.addEventListener('load',stopload);
    /*20秒たったら強制的にロード画面を非表示にする*/
    setTimeout('stopload()',20000);
  },
  /*ロード画面を非表示にする*/
  stopload:function(){
    bf.classList.add('fadeout-bf');
    loader.classList.add('fadeout-loader');
  },
},
}
</script>
<style>
/*ローディング画面作成*/
/*非表示*/
.is-hide{
  display:none;
}
/*ローディング画面をフェードアウト*/
.fadeout-bf{
  transition-property: opacity;
  transition-delay: .9s;
  transition-duration: .8s;
  opacity:0;
  pointer-events:none;
}
/*ローダーをフェードアウト*/
.fadeout-loader{
  transition-property:opacity;
  transition-delay: .9s;
  transition-duration: .3s;
  opacity:0;
  pointer-events:none;
}
/*ローディング画面*/
#loader-bf{
  background:#ffffff;
  height: 100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:100;
}
#loader{
  heigth:120px;
  left:50%;
  margin-left:-60px;
  margin-top:-60px;
  position:fixed;
  top:50%;
  width:120px;
}
#loader img{
  display:inline-block;
}
</style>

ソースコードについて

3行目の「v-on:load="load"]で<script>内のmethodで作成したload関数を使い、
ロード画面を非表示にするclass"is-hide"を削除して、ロード画面を表示します。
その後読み込みが完了したもしくは強制的に20秒後にロード画面をフェードアウトさせます。
<style>に記述されている部分はフェードアウトの実際の動作を記述しています。

考えられる問題

ロード中のページが見えていることから、要素を削除するclass"is-hide"が除去できていない。すなわち<script>内の関数「load」が作動していないかと思います。しかし、 「v-on:load="load"」で関数を呼び込んでいるので自分の考える動作をそれぞれの箇所で行えていれば大丈夫かと思います。
ここで問題なのが「v-on:load="load"」が作動し、関数loadが実行されるのが
「ページの内容全てをロード完了した時なのか」それとも、
「v-on:load="load"を読み出したときなのか」ということです。
後者の場合load関数が呼ばれてもページが読み込まれているため、<script>内の 
window.addEventListener('load',stopload);
ここでstoploadが即座に実行され、ローディング画面が表示されないのではないかと思います。
v-on:「イベント」について詳細に記載されている記事や購入した教科書内では見つからず
初歩的な質問になってしまい申し訳ありませんがもしよろしければ解決法をご教授していただけないでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る