雑多開発ブログ(仮)

RailsでJavascriptのロード画面が終わらない

jQueryを使ってページを読み込んでいる間ロード画面を表示するようにしていたが、何故か延々とロード画面が表示されてページが表示されない。

よくよく調べてみるとページ内のリンクから飛んだ場合は必ずロード画面で止まるのに対して、アドレスに直接飛んだりページ更新をした場合は問題なく表示されました。原因がわからずapplication.jsをいじくり回していたら原因がわかりました。

対処方法

application.jsの//= require turbolinksを削除する。

原因

turbolinks  こいつが原因でした。

kray.jp

Rails4以降ではデフォルトでGemfileに記載されているため、よく見てなかった自分のアプリにも入っていました。またapp/assets/javascript/application.jsでもデフォルトで読み込む設定をしています。

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

下から二行目の//= require turbolinksで読み込んでますね。

自分の環境ではロード画面の表示をjQueryのreadyイベントで行っていたのですが、上記のリンクによると

turbolinksでページをロードすると、jQueryのreadyイベントが発火しません。

なんてこった。どうりで内部リンクから飛ぶと正常に表示できないわけです。

今回のアプリケーションでは他人が作ったJavascriptcssを動かそうとしていた為、ロード画面のコードはいじらずapplication.jsの//= require turbolinksを消すことによって問題を解消しました。