$(window).on("load resize",function() {を用いた際にページ遷移時のみ発火しない

Question

前提・実現したいこと

現在、可変的なwitdhを持った画像に対して同値のheightを作るjQueryを作っています。
コード自体は簡単でありますが、中々うまくいかないのでご教授お願いいたします。

発生している問題・エラーメッセージ

発生してる状態としてはon"load resize"でイベント設定しているのですが
更新時とブラウザサイズ変更時は適用されるのですが、ページ遷移時が適用されません。

該当のソースコード

$(window).on("load resize",function() {
  var img_width  = $('.resize').width();
  $('.resize').css("height", img_width+ "px");
  console.log(img_width)
});

試したこと

更新時や画面サイズ変更時は適用されている為、コードやクラス名との関連付けは問題ないと思っています。
またrails5を使っているためturbolinkに問題があるのかと

    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

の追加や

$(document).on('turbolinks:load', function() {
  〜該当コード〜
});

とやってみましたが、特に効き目はなかったです。

補足情報（FW/ツールのバージョンなど）

ruby 2.5.1
Rails 5.0.7.2
jquery-rails (4.3.5, 4.3.3)
jquery-ui-rails (6.0.1)

Answer 1

function resizeImage() {
  var img_width  = $('.resize').width();
  $('.resize').css("height", img_width+ "px");
  console.log(img_width)
}

$(window).on("load resize", resizeImage);
$(document).on('turbolinks:load', resizeImage);

ではないでしょうか。

$(document).on('turbolinks:load', function() {
  $(window).on("load resize", //...
});

試された方法????は動作としては

• 画面遷移したときに
• window load のイベントハンドラをつける

のようになります。

が window load は更新ボタンをしたときにしか発火しないので、画面遷移時にイベントハンドラをつけても意味がありません

Comments

[sakusakusaku10]

ありがとうございます！！！
window loadは更新時のみだったのですね。。。
とてもわかりやすい説明で納得いきました！！