RailsでJavascriptのロード画面が終わらない
jQueryを使ってページを読み込んでいる間ロード画面を表示するようにしていましたが、何故か延々とロード画面が表示されてページが表示されません。
よくよく調べてみるとページ内のリンクから飛んだ場合は必ずロード画面で止まるのに対して、アドレスに直接飛んだりページ更新をした場合は問題なく表示されました。原因がわからずapplication.jsをいじくり回していたら原因がわかりました。
対処方法
application.jsの//= require turbolinksを削除する。
原因
turbolinks こいつが原因でした。
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イベントが発火しません。
なんてこった。どうりで内部リンクから飛ぶと正常に表示できないわけです。
今回のアプリケーションでは他人が作ったJavascriptやcssを動かそうとしていた為、ロード画面のコードはいじらずapplication.jsの//= require turbolinksを消すことによって問題を解消しました。
