どうしても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

回答 3
ベストアンサーを選択すると、解決済みとなります。
nodata
まだ回答がありません
回答
nodata
回答するにはログインが必要です