loadingをもうちょっと改良してみました
まずloadingが終了するまで触れないよう
半透明のdivを重ねました
ついでに画像でもやってみました
※jqueryが必要です。
まず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は未確認ですがたぶん動作すると思います
</span>
<span>
</span>
<span>
</span>
<span>
</span><br />
<div id= "c2"></div>
<div id= "f2"></div>
<div id= "i2"></div>
<div id= "s2"></div>
OpenWeatherMap
weather_hacks(LiveDoor)
HTML表示と同時に行うとどうしても遅い感じを与えるため
アイコン表示が終わって一呼吸後に未読件数を表示することによって軽減してます。