Categories: WordPress

WordPressでローディング画面を実装してみたぜ！のメモ

自分のGunosyに引っかかって、これだ！と思ったものがありましたので紹介します。

ローディング画面のサンプルだと思いますが、
なかなかおしゃれだと思ったので、このサイトにも適用してみました！
※かなりの苦労をしました。

参考にしたサイトはこちら
http://2g.atsukitaira.com/javascript/jquery/953/

そしてこれが自分の設定メモ。

【php】

<body>
<div id="spinner" class="spinner"></div>
<div id="fade"></div>
<div id="header">
<div id="main_content">
<div id="left_col">

【css】
→サンプルをそのまま貼りつけました。

【js】

$('head').append(

'<style type="text/css">#header,#main_content,#left_col { display: none; } #fade, #spinner { display: block; }</style>'

);
jQuery.event.add(window,"load",function() {
    var pageH = $("#container").height();
    $("#fade").css("height", pageH).delay(900).fadeOut(800);
    $("#spinner").css("display", "none");
    $("#header").css("display", "block");
    $("#main_content").css("display", "block");
    $("#left_col").css("display", "block");
});

WindowsのPCで確認すると、うまくいってそうな感じですが、
一瞬、画面を読み込んでしまってからローディング画面がでてきたりしてるので
改善しないといけないです。
そしてMacでみると、完全におかしいことになってるｗ

今後も継続して改善して行こうと思ってますが、Wordpressとかよくわからないですね～。
だれか教えてほしいです。
※しばらくたっても状況が変わってなければ諦めたと思ってください。

以上