ロード時に「loading…」を表示しフェードアウト

Posted on by IKIX_wbdv

　サイトを読み込むときに簡単なメッセージを表示し，それをフェードインする方法．jQueryは必要．

<html lang="ja" data-loading="">
 ...

　htmlタグにカスタムデータ属性を直接書いてしまう．

html:after {
  //ここが重要
    content: attr(data-loading) "Now loading...";
  //この下は文字とその配置
    color: #fff;
    font-size: 18pt;
    position: absolute;
    top: 50vh;
    right: 50%;
}

　htmlタグに:afterを付けてcontentにメッセージを書いてしまう．
　以下はJavaScriptの外部ファイル．

  //フェードインの準備．このために外部ファイルにする．
$('head').append(
    '<style>body{display:none;}</style>'
);
$(window).on("load", function() {
  //ロード時にゆっくりフェードイン
    $('body').delay(600).fadeIn("slow");
  //文字列「Now loading...」が消え去る
    $('html').removeAttr("data-loading");
});

　removeAttrでメッセージを消してしまう．