ローディング中画像の表示

★　ローディング中画像の表示


★（#amebaBar→#ambHeaderに変わりました）2014.04.13


●　ページのロード中にローディング画像を表示して、
　　ＨＴＭＬをすべて読み込んでからブログを表示させる。


◆　利用上の注意点

　　CSS編集ページの確認（プレビュー）でデザインを確認する場合、この記事の
　　CSSをいれると、画面が真っ白でローディング中ボタンのみ表示される現象に
　　なります。

　　この現象は、アメブロの仕様では、ＣＳＳ編集ページでのの確認（プレビュー）では、
　　フリープラグインがまったく機能しないためです。

　　よって、対策としては、ローディング中のＣＳＳは外した状態で
　　確認するしか方法はありません。
　　確認したあとに、ローディング中のＣＳＳを最後に入れて、保存する。


　　または、下記をCSSのに入れて確認して、下記を外して保存する

.skinBody,#amebaBar{display:block;}
body{background-image:none;}






◆　使用するローディング中画像例

http://stat001.ameba.jp/user_images/20120727/07/new-blue-777/5c/0a/g/o0048004812100799458.gif






①　ＣＳＳへ下記を追記する(黄色の部分を変更)

/* ------------------------------------------------ */

/* ◆　ローディング中画像の表示 　　　　　　　　　　*/

/* ------------------------------------------------ */

.skinBody{/* 全体を非表示 */

display:none;

border:none;

}

#ambHeader {/* アメーババーを非表示 */

display:none;

border:none;

}

.skinFrame{/* フレームを非表示 */

display:none;

}

body{/*  ロード画像 */

background-image:url(ローディング中の画像のＵＲＬ);

background-repeat:no-repeat;

background-position:center center;

background-attachment: fixed;

}

/* ------------------------------------------------ */

◆　説明

・　200px は上からの距離をしていします。
　　中央にはできないので注意する。



②　フリープラグインへ追記する。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

<script type="text/javascript">

function loding_disp(load_ftime){

$(document).ready(function(){

$('#ambHeader,.skinBody,.skinFrame').fadeIn(load_ftime);

$('body').css("background-image","none");

$('body').css("background-repeat","repeat");

$('body').css("background-position","left top");

});}

loding_disp(3000);

</script>

◆　説明

・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

・　3000 は　3秒の意味。　HTMLが読み込み完了したあと、ブログを表示するまでの
　　時間です。

・　body に背景画像をしてしている場合は、スクリプトにCSSを指定する必要があります。
　　スクリプトの下記部分です。
　　（背景を固定していない場合は、background-attachment 部分を追加する。


$('body').css("background-image","none");
$('body').css("background-repeat","repeat");
$('body').css("background-position","left top");





$('body').css("background-image","url(画像のURL)");
$('body').css("background-repeat","repeat");
$('body').css("background-position","left top");
$('body').css("background-attachment","scroll");






★　追記

①　アメーババーを消している場合は、下記スクリプトにしてください

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

<script type="text/javascript">

function loding_disp(load_ftime){

$(document).ready(function(){

$('.skinBody,.skinFrame').fadeIn(load_ftime);

$('body').css("background-image","none");

$('body').css("background-repeat","repeat");

$('body').css("background-position","left top");

});}

loding_disp(3000);

</script>