[JS]jQueryでローディング画面を実装する方法｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]jQueryでローディング画面を実装する方法

スポンサード

ページを読み込む際に、jQueryでローディング画面を実装する方法のご紹介です。

jQueryとCSSでローディング

今回は以下のようなCSSとHTMLを用意しました。

CSS

#loading {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: center
  }

#loading .loader {
  position: fixed;
  top: 50%;
  left: 50%;
  margin:auto
  }

#loading {

width: 100%;

height: 100%;

background: #fff;

position: fixed;

top: 0;

left: 0;

z-index: 999;

text-align: center

}

#loading .loader {

position: fixed;

top: 50%;

left: 50%;

margin:auto

}

.loaderの要素のtopとleftの値（ローディング画像の表示位置）は、サイトに合わせて調整してみてください。

HTML

<div id="loading">
	<div class="loader">
		<img src="ローディング画像のパス">
	</div>
</div>

</div>

ローディング画像の生成

ローディング画像は以下のジェネレータより手軽に作成することができます。

Loader Generator

※Loader Generatorの使い方は、別途こちらの記事も参考にしてみてください。

Javascript

いくつか実装方法がありますが、まずは一番シンプルなローディングのパターンです。

<script src="./jquery.min.js"></script>
<script>
 jQuery(window).load(function() {
    jQuery("#loading").hide();
});
</script>

jQuery(window).load(function() {

jQuery("#loading").hide();

});

</script>

次にsetTimeout()を使って、指定した時間の経過後にローディングを解除する方法です。

<script src="./jquery.min.js"></script>
<script>
 jQuery(window).load(function() {
    $("#loading").show(); 
    setTimeout(function(){
    	$("#loading").hide();
    },3000);
});
</script>

jQuery(window).load(function() {

$("#loading").show();

setTimeout(function(){

$("#loading").hide();

},3000);

});

</script>

また、fadeOut()でローディング顔面をフェードアウトさせる方法もあります。

<script src="./jquery.min.js"></script>
<script>
jQuery(window).load(function() {
    jQuery("#loading").fadeOut(3000);
});
</script>

jQuery(window).load(function() {

jQuery("#loading").fadeOut(3000);

});

</script>

簡単なデモを以下のページに用意しました。setTimeout() を使ったローディングのデモになります。
jQueryとCSSでローディングデモ

スポンサード