別サイトから訪問したときとリロードしたときのみローディング画面を表示したい。

javascript
1$(function() {
2    var ref = document.referrer;
3    var hereHost = window.location.hostname;
4    var sStr = "^http?://" + hereHost;
5    var rExp = new RegExp( sStr, "i" );
6
7    $(window).on("load", function() {
8        if (ref.match(rExp)) {
9            $(".loading").remove();
10        } else {
11            $('.loading').delay(1000).slideUp("slow");
12
13            function loaderClose() {
14                $(".loading").slideUp("slow");
15            }
16            setTimeout(loaderClose,10000);
17        }
18    });
19});

別サイトから訪問したときとリロードしたときのみ、ローディング画面を表示したいです。
リファレンスを使用して作ってみたのですが、別ページから訪問したときのみ表示するのには成功したのですが、
ページをリロードしたときにもローディング画面を表示したいのですがうまくいきませんでした。
この場合どうすればいいのでしょうか？よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

リロードの判別も組み合わせればよいです。

【JSでブラウザがリロードされたかどうかを判定する | SPYWEB】
https://spyweb.media/2018/01/16/js-detect-browser-reload/

【Navigation Timing API - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Navigation_timing_API

投稿2019/09/13 18:10

kei344

総合スコア69458

退会済みユーザー

2019/09/14 04:16

回答ありがとうございます。無事解決しました！ありがとうございました！

x_x

2019/09/17 07:47

PerformanceNavigation が非推奨になっているようなので、 PerformanceNavigationTiming を使ったほうがいいかもしれません。 https://developer.mozilla.org/ja/docs/Web/API/PerformanceNavigation https://spyweb.media/2018/01/16/js-detect-browser-reload/ Can I use では IE が PerformanceNavigationTiming に対応していないと書かれていますが、手元の IE11 では動作しました。

kei344

2019/09/17 08:36

To: x_xさん補足ありがとうございます！ ```js // こんな感じで採れそう performance.getEntriesByType("navigation")[0].type ``` 【JavaScriptでページが更新 or 戻る・進むされたかなどを調べる方法 | PisukeCode - Web開発まとめ】 https://pisuke-code.com/js-get-navigation-type/

退会済みユーザー

2019/09/17 18:53

お二人とも補足ありがとうございます！ ```js if (window.performance.getEntriesByType("navigation")[0].type === "reload") ``` リロードの場合はこれで動作しました！

退会済みユーザー

2019/09/17 19:41

※追記 iPhoneのChromeとSafariで確認してみたところ、PerformanceNavigationTimingを使用すると iOSのブラウザの場合、すべてのJavaScriptの機能が動作しなくなりました。この場合、PerformanceNavigationを使うしかありませんか？

x_x

2019/09/18 00:21

Can I use では iOS はどちらも対応していないように見えますが PerformanceNavigation は使えるのでしょうか？ Can I use もあまりあてにできないですね

退会済みユーザー

2019/09/18 20:13

iOSではちゃんとPerformanceNavigationは動作しました！