環境
laravel5.6, riot.js
問題点
「htmlの表示される順番のせいで、画面がちらつく。」
(下記コードの読み込まれる順序・詳細)
①div要素部分のみが先に読み込まれ、表示されてしまう
→visivility: hiddenを使用し読み込み終わるまで非表示にする
②tag(<Header>, <Sidebar>, <Spinner>)が読み込まれ表示
→div要素も一緒のタイミングで表示される(loading_displayの制御で、visibility: visibleに変わるため)
しかし例えば@yield('content')の中身が重い
→@yield('content')が表示される前に、@include('footer')が表示されてしまう。
(中央メイン部分が読み込み中で何も表示されていないのに、フッターが先に表示されている状態)
→@yield('content')の中身も全て表示されたと同時に、@include('footer')を表示する方法がないか模索中
できるだけ、hoge.default.php内のみで制御したいです。
他ファイルで「loading_display」を制御して、とやってみましたが拡張性がないのでやめました。
皆様ならどのように対処をするか記載していただけると助かります。
よろしくお願いいたします。
//hoge.default.php <Spinner> <Header></Header> <div class="hoge"> <div class="{loading ? 'visible' : ''}" style="visibility: hidden">@yield('content')</div> <Sidebar></Sidebar> </div> <div class="{loading ? 'visible' : ''}" style="visibility: hidden">@include('footer')</div> //ローディング画像表示div <div class="spinner" hide={loading_display}> <img src="/app/images/used-domain/progress.gif"> </div> </Spinner>
//Spinner.tag <Spinner> <script> const self = this; window.onload = function() { self.update({loading: true}); }; </script> </Spinner>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/29 21:08
退会済みユーザー
2018/11/30 03:09