どうしてもwebページのスムーズな読み込みができない？
解決済
回答 3件
2022/02/24 14:22
質問内容
webページのスムーズな読み込み
ハル先生のlesson動画で勉強しデプロイまでできましたが 全て正常に動作するのですがページによっては、どうしても 読み込みがおかしい
一瞬文字だけ表示される(スタイルが効いていない)
その後、すぐ正常に表示される
ソースコード
{% load static %} {% load user_tags %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@500&display=swap" rel="stylesheet"> <link href="{% static 'css/vuetify.css' %}" rel="stylesheet"> <link href="{% static 'css/style.css' %}" rel="stylesheet"> <link href="{% static 'css/materialdesignicons.min.css' %}" rel="stylesheet"> <title>Vital Get</title> <link rel="manifest" href="/static/manifest.json"> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function() { console.log('Service Worker Registered'); }); } </script> </head> <body> <v-app id="app"> <v-row justify="center"> <v-col cols="12" xs="aouto"> <template> <v-bottom-navigation height="70" class="pink" dark> {% if user.is_authenticated %} <v-btn href="{% url 'index' %}"> <span>Home</span> <v-icon large>mdi-home</v-icon> </v-btn> <v-btn href="{% url 'profile' %}"> <span class="font-weight-bold">マイページ</span> <v-avatar size="38"> {% for user in user_data %} {% if user.image %} <v-img src="{{ user.image.url }}"></v-img> {% else %} <v-icon large>mdi-account-circle</v-icon> {% endif %} {% endfor %} </v-avatar> </v-btn> <v-btn href="{% url 'vital_his' %}"> <span class="font-weight-bold">バイタルヒストリー</span> <v-icon large>mdi-book-open-outline</v-icon> <v-badge color="red" left overlap content={{ request.user | vi_count }}></v-badge> </v-btn> {% else %} <h1 class="mt-4">Let's start with Vital Get</h1> </v-bottom-navigation> {% endif %} </template> </v-col> </v-row> <main> {% block content %} {% endblock %} </main> <template> <v-footer v-bind="localAttrs" :padless="padless" fixed> <v-bottom-navigation height="60" class="red dark"> <v-btn href="{% url 'drug' %}"> <span class="white--text font-weight-bold">お薬メモ</span> <v-icon large>mdi-pill</v-icon> </v-btn> <v-btn href="{% url 'contact' %}"> <span class="white--text font-weight-bold">連絡人登録</span> <v-icon large>mdi-cellphone-settings</v-icon> </v-btn> <v-btn href="{% url 'top' %}"> <span class="white--text font-weight-bold">Hp-q</span> <v-icon large>mdi-hospital-box-outline</v-icon> </v-btn> <v-btn href="{% url 'all_doten' %}"> <span class="white--text font-weight-bold">Negai-10</span> <v-icon large>mdi-numeric-10-box</v-icon> </v-btn> {% if user.is_superuser %} <v-btn href="{% url 'user_manage' %}"> <span class="white--text">UserM</span> <v-icon large color="white">mdi-alien-outline</v-icon> </v-btn> <v-btn href="{% url 'unsafe' %}"> <span class="white--text">Unsafe</span> <v-icon large color="white">mdi-box</v-icon> </v-btn> <v-btn href="/admin"> <span>admin</span> <v-icon large>mdi-angular</v-icon> </v-btn> {% endif %} </v-footer> </template> </v-app> {% block extra_js %} <script src="{% static 'js/vue.js' %}"></script> <script src="{% static 'js/vuetify.js' %}"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { dialog:false, icondialog:true, dialog2:true, dialog3:false, dialog7:true, subdialog:false, avadialog:false, loader: false, pass:"", url: "", show:false, show2:false, drug:false, sheet: false, dokuso:false, count:0, showPassword : false, items: ['1','2','3','4','5','6','7'], btn:false , job:['会社員', '公務員', '医療従事者', '主婦', '学生','ショップ店員','無職','その他'], rela:['親子','親戚','兄弟・姉妹','友人','知人','行政の人','不動産管理者','その他'], num_time:['1','2','3','4','5'], src:"", email:"", asa_msg:false, src2:"", imgdialog:true, snackbar: true, drug:true, passde:false, big:false, snackbar2:false, seeing:false, overlay2:false, required: value => !!value || "必ず入力してください", img_req: value => !!value || "画像ファイルを選択してください", job_req: value => !!value || "職業を選択してください", rela_req: value => !!value || "間柄を選択してください", num_req: value => !!value || "数字を選択してください", render_req: value => !!value || "性別を選択してください", limit_length: value => value.length <= 6 || "6文字以内で入力してください" , pass_len: value => value.length >= 10 || "10文字以上で入力してください", hira_zi: value => { const pattern = /^[あ-ん゛゜ぁ-ぉゃ-ょー「」、]+/ return pattern.test(value) || 'ひらがなで入力して下さい'}, kanzi_zi: value => { const pattern = /^[ぁ-んァ-ヶー一-龠]+$/ return pattern.test(value) || '全角漢字で入力して下さい'}, year_len: value =>{ const pattern = /^([0-9]{4,4})$/ return pattern.test(value) || '4桁半角数字'}, month_len: value =>{ const pattern = /^([0-9]{1,1})$/ return pattern.test(value) || '1桁半角数字'}, day_len: value =>{ const pattern = /^([0-9]{1,2})$/ return pattern.test(value) || '2桁以内半角数字'}, tel_num: value => { const pattern = /^([0-9]{11})$/ return pattern.test(value) || 'ハイフンなし半角数字のみ入力してください'}, zip_num: value => { const pattern = /^([0-9]{7})$/ return pattern.test(value) || 'ハイフンなし半角数字7桁入力してください'}, pass_v: value => { const pattern = /^[a-zA-Z0-9]+[a-zA-Z!]+[0-9]/ return pattern.test(value) || '英字と数字を組み合わせてください'}, rules: [ value => !!value || '必ず入力してください', value => { const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return pattern.test(value) || 'メールアドレスを正しく入力してください。' }, ], rules2: [ value => { const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return pattern.test(value) || 'メールアドレスを正しく入力してください。' }, ], } }, methods: { submit() { if (this.$refs.user_form.validate()){ } else{ alert('NONONONP') this.show = !this.show event.preventDefault() } }, onFocus: function(){ this.show = false }, onFocus2: function(){ this.show2 = true this.show = false }, close:function(){ this.show2 = false }, onFocus3: function(){ this.show = false this.passde = true }, onBlur: function(){ this.show3 = false }, onBlur2: function(){ this.hawai="" }, woman(event){ this.src2="/static/img/woman_k.png" this.show = false }, man(event){ this.src2="/static/img/man_k.png" this.show = false }, payment: function(){ this.show=!this.show }, goto: function(){ this.drug=false }, goto2: function(){ this.drug=true }, drugde: function(){ this.seeing = true this.asa = true this.src="/static/img/drug_asa.gif" // setTimeout(() => {this.asa_msg = true},7000) // setTimeout(() => {this.src="/static/img/drug_asago.gif"},8500) }, drughiru: function(){ this.seeing = true }, drugban: function(){ this.seeing = true }, subsp: function(){ this.subdialog=true }, ava:function(){ this.avadialog=true }, over:function(){ this.big=true }, onMouseout:function(){ this.big=false }, loader2:function(){ this.loader=true }, delyes: function(){ if (this.$refs.user_form.validate()){ this.overlay2= true } else{ event.preventDefault() } }, getbtn: function(){ this.overlay2=true }, }, }) </script> {% endblock %} </body> </html>
自分で試したこと
アイコンのcssは使用するアイコンのみ表記しました
補足情報
サーバーVULTR Django2.2.10
@FullStackChannel