東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

loading.jsでの注意点

loading中にスクロールすると下のほうでコンテンツがみえちゃってるときがあるのでその対策。

①まず下記URLのloading.jsを保存してサーバーアップ

http://web-pc.net/jquery004

$('head').append(
    '<style type="text/css">#loading111 { display: none; } #fade, #loader { display: block; }</style>'
);
 
jQuery.event.add(window,"load",function() {
    var pageH = $("#loading111").height();
 
    $("#fade").css("height", pageH).delay(900).fadeOut(800);
    $("#loader").delay(600).fadeOut(300);
    $("#loading111").css({"display":"block"});
});

②次にheadタグで読み込んで、html,cssを設定。

<head>
<script src="js/loading.js"></script>
</head>

<body>
<div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/common/loading.gif" alt="Loading..." /></div>
<div id="fade"></div>

<div id="loading111">

ここにウェブサイトの内容。この範囲がローディング中隠れる。

</div><!--loading111-->

</body>

<||

>|css|

#loader {
    width: 16px;
    height: 16px;
    /*display: none;*/
    position: fixed;
    /*position: absolute;  IE6対策 */
    top: 50%;
    left: 50%;
    margin-top: -8px; /* heightの半分のマイナス値 */
    margin-left: -8px; /* widthの半分のマイナス値 */
    z-index: 100;
}
 
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 50;
}

#loading111{
  width:100%;
  height:100%;
}