難でもアリ: Loading表示を改良

loadingをもうちょっと改良してみました
まずloadingが終了するまで触れないよう
半透明のdivを重ねました
ついでに画像でもやってみました
※jqueryが必要です。

つれづれなるまゝに：退屈なこと、さみしいこと、無聊。日くらし：＜ひぐらし＞と読む。
朝から晩まで。終日。ひねもす。心に移りゆくよしな

      test :function () {
        var j = 100;
        for (var i = 0; i < j ; i++){
          console.log(i);
        }
      }

龍神スカイライン

ではHTMLから

    <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    </head>
    <!-- 文章  -->
    <div id="waku1">
      <div class="main">
      つれづれなるまゝに：退屈なこと、さみしいこと、無聊。 日くらし：＜ひぐらし＞と読む。
      <br> 朝から晩まで。終日。 ひねもす。 心に移りゆくよしな
      </div>
      <div class="scrn"></div>
      <div class="load"></div>
    </div>
    
    <!-- sytax  -->
    <div id="waku2">
    <div class="main">
    <pre class="brush:js" title="検証">
      test :function () {
      var j = 100;
      for (var i = 0; i < j ; i++){
        console.log(i);
      }
    }
    </pre>
    </div>
    <div class="scrn"></div>
    <div class="load"></div>
    </div>

    <!-- 画像  -->
    <div id="waku3">
    <div class="main">
    <img class="photo01" height="358" width="540" src="画像">
    </div>
    <span class="tag"><span id="tagtxt">タグ名</span></span>
    <div class="scrn"></div>
    <div class="load"></div>
    </div>

CSSは多少長いです
画像はサイズ指定必須です

各セレクタのpositionがポイントです

/*通常の文章*/
    #waku1 {
      position: relative;
      width: 300px;
      height: 100px;
      border: solid 1px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
    }
/*Syntaxhighlighter*/
    #waku2 {
      position: relative;
    }
/*画像*/
    #waku3 {
      position: relative;
      width: 553px;
      height: 373px;
      top:5px;
    }
    
/*loadingしたい場所*/
    .main {
      display: none;
      width: 100%;
      height: 100%;
    }
/*半透明枠*/
    .scrn {
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.4;
      margin-top: 5px;
      user-select: none;
      position: absolute;
      bottom: 0px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
    }
/*ローディング画像用*/
    .load {
      width: 100%;
      height: 100%;
      background: url("loading画像") 50% 50% no-repeat;
      position: absolute;
      bottom: 0px;
    }
/*画像のタグ*/
    .tag{
      position: absolute;
      right: 0px;
      top: 20px;
      background-color: black;
      color: white;
      padding: 2px 15px;
      font-size: 13px;
      box-shadow: 5px 5px 20px rgba(20, 20, 20, 0.5);
    }

jQueryを使用してます。
表示したい内容をフェードインして
不要なものをフェードアウトするだけなので短いものです

    window.onload = function () {
      $(".main").fadeIn(2000);
      $(".scrn").fadeOut(2000);
      $(".load").fadeOut(2000);
    }

safariは未確認ですがたぶん動作すると思います

2015年6月27日土曜日

Loading表示を改良

ラベル