ブラウザバック(戻る)などでも強制的に読み込みを行う方法
アニメーションなどをロード時に走らせるようにするために、
設定されている方もおおいと思います。
今回はブラウザの戻るボタンやスマホのスワイプで戻るをした時に、
ロードせずにアニメーションがとまったままというのを解決したいと思います。
解決方法
onpageshowを使う
|
<script> window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }; </script> |
onloadを使う方法だと、
ページの読み込み後に処理を行うので、
戻るボタンを押したときに下の場合に反応してくれないんです。。
|
<script> // 画面が読み込まれた時、activeを外しアニメーション $(window).on('load', function(){ $('body').removeClass('active'); }); </script> |
bodyにopacityなどで要素を隠しているときに、
onpageshowだと強制的に読み込みを行うので、反応してくれるようになります。
2023年IT導入補助金でお得にECサイト
【実践マーケティング手法22選】 無料ダウンロード
助成金・補助金・融資・M&A等の総合経営支援サービス「あなたのアイボー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。