IEやEdgeでfadeOut()が効かない！ローディングバーが非表示にならなくて困ったこと
先日ローディング画面を実装しました。
ページの内容が読み込まれたらjQueryのfadeOut()でローディング画面を非表示にして、本編を表示させようとしました。
ところがローディング画面がクロムでは非表示になりますが、IEとEdgeで非表示になりません。
非表示にさせるために記述したjQueryのコードは下記になります。
$(window).on('load', function () {
$('#loading_bg').delay(1800).fadeOut(1200);
});
このコード自体には何も問題がありませんが、記述場所に問題がありました。
コードの理解が不足していたことで記述場所を誤ったのが原因だったので、自分へのメモも兼ねてその時のことを記事にしようと思います。
動作しなかった時のコード
動作しなかったときは下記のように、$(function(){ });の{ }の中に冒頭のコードを記述しました。
しかし、これだと動作せず、fadeOut()が効きません。
$(function(){
//htmlが読み込まれた時の処理
$(window).on('load', function () { //全ての読み込みが完了したら実行
$('#loading_bg').delay(1800).fadeOut(1200);
});
});
どうすれば良かったのか
jQueryのコードは$(function(){ }); の{ }の中に記述するもの、と思い込んでいましたが、$(window).on(‘load’,function(){ }) ;は、このコードの外に記述する必要がありました。
下記のようにします。
$(function(){
//htmlが読み込まれた時の処理
});
$(window).on('load', function () { //全ての読み込みが完了したら実行
$('#loading_bg').delay(1800).fadeOut(1200);
});
これでIEでもEdgeでもクロムでもfadeOut()が動作して、非表示になります。
$(function(){ });と
$(window).on(‘load’,function(){}); の違い
$(function(){ });
$(document).ready(function () {});とも書きますが、 これは、HTMLの読み込みが終わったら{ }内の処理を実行するよう指示しています。
ここで注意したいのは、あくまで「HTMLの読み込みが終わったら」、ということで、画像や動画などの要素は含まれません。
$(window).on(‘load’,function(){ })
こちらは、HTMLだけでなく画像や動画などの読み込みが終わったら{ }内の処理を実行するよう指示しています。
両者、読み込む対象に違いがあるため、処理の実行タイミングが異なります。
読み込む対象に違いはありますが読み込み後に処理を実行、という同じ動作をすることから、$(function(){ })の{ }内に記述すると動作しないようです。
この記事がどなたかのお役に立てると幸いです。
