ブラウザバック（戻る）などでも強制的に読み込みを行う方法

SUGOYOKU BLOG

アニメーションなどをロード時に走らせるようにするために、設定されている方もおおいと思います。今回はブラウザの戻るボタンやスマホのスワイプで戻るをした時に、ロードせずにアニメーションがとまったままというのを解決したいと思います。

<script>
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();	
}
};
</script>

window.onpageshow = function(event) {

if (event.persisted) {

window.location.reload();

}

};

</script>

onloadを使う方法だと、ページの読み込み後に処理を行うので、戻るボタンを押したときに下の場合に反応してくれないんです。。

<script>
// 画面が読み込まれた時、activeを外しアニメーション
$(window).on('load', function(){
$('body').removeClass('active');
});
</script>

// 画面が読み込まれた時、activeを外しアニメーション

$(window).on('load', function(){

$('body').removeClass('active');

});

</script>

bodyにopacityなどで要素を隠しているときに、 onpageshowだと強制的に読み込みを行うので、反応してくれるようになります。

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。