ホーム » javascript関連 » jQueryでhtmlの簡易ローディング画面

jQueryでhtmlの簡易ローディング画面

   作者:ビズコネクトポータル   发布时间:2013-08-13   

loading

ステップ1:
HTMLヘッダーに追加
・CSS
<style type="text/css">
#loader {
 Z-INDEX: 100; POSITION: fixed; MARGIN-TOP: -32px; WIDTH: 64px; DISPLAY: none; HEIGHT: 36px; MARGIN-LEFT: -18px; TOP: 50%; LEFT: 50%; _position: absolute
}
#fade {
 Z-INDEX: 50; POSITION: absolute; BACKGROUND-COLOR: #ffffff; WIDTH: 100%; DISPLAY: none; HEIGHT: 100%; TOP: 0px; LEFT: 0px
}
</style>

・JavaSclipt
<script>

    $('head').append(
  '<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
 );

 jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
  var pageH = $("#container").height();

  $("#fade").css("height", pageH).delay(900).fadeOut(800);
  $("#loader").delay(600).fadeOut(300);
  $("ul").css("display", "block");
 });
</script>

ステップ2:
HTMLボディに追加

<div id="loader"><img src="../img/loading.gif" width="120" height="120" alt="Loading..." /><br />Loading...</div>
<div id="fade"></div>

此评论不代表本站观点大家说

《jQueryでhtmlの簡易ローディング画面》等您坐沙发呢!

发表评论

亲,不支持纯字母、符号评论哦~