処理に時間がかかり、「localhostを待機してます」 と下に表示されている時に、PACE.JSを利用して、プログレスバーを表示させたいのですが、上手くいきません。(ページの読み込み時には表示されるのですが、関数を実行して次のページに遷移するような関数を読み込み時には表示されない)
HTML
1<meta charset="utf-8"> 2 <title>{{title}}</title> 3 <link rel ="stylesheet" type="text/css" 4 href="{% static 'keiba/css/style.css' %}" /> 5 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js" ></script> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-loading-bar.css" > 8 9 10 11
ページを初めて読み込む時、再読み込み、関数を読み込み(postし同ページにリターン) ページ内で表示した時には表示されるのですが、肝心の関数を読み込み別のページに遷移する処理をする時に表示されません。
postに適用されていないのが原因かもしれないと思い、下記のように対応したのですが、結果は変わりませんでした。(遷移先のHTMLにも追記しましたが、あくまでURLが遷移先に移ってから、バーが表示されるだけ。
遷移前のページで「localhostを待機してます」となっている時には表示されません。
参考記事
https://qiita.com/okashoi/items/ae91eaa539c1f33fccb5
①・https://github.hubspot.com/pace/docs/welcome/から「pace.js」をクリック。
・djangoのstatic/アプリ名 の下に空のjsファイルを作成し、ブラウザに表示されたコードを貼り付け。
②HTMLを下記の通り変更
html
1logic.html 2 3<head> 4 <meta charset="utf-8"> 5 <title>{{title}}</title> 6 <link rel ="stylesheet" type="text/css" 7 href="{% static 'keiba/css/style.css' %}" /> 8 9 <script src="{% static 'keiba/pace.js' %}" ></script> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-loading-bar.css" > 11 12........ 13
javascript
1pace.js 2 3..... 4...... 5...... 6 7 8Pace.options.ajax.trackMethods = ['GET', 'POST'];
どのようにしたら、同ページ内で「localhostを待機してます」となっている時に、バーを表示させることができるでしょか?
あなたの回答
tips
プレビュー