なんらかの理由で、このページはロード中に暴走します。サイズを変更すると (元のサイズに戻すことを含む)、すべてが既に存在するかのように完全に読み込まれます。しかし、ブラウザウィンドウのサイズを変更するまで、空白の画面が表示されます。
注: 奇妙なことに、サイズ変更の前に、ランダムな組み合わせが読み込まれます。
誰でも私の問題を見ますか？
ここにJSフィドルがあります：http://jsfiddle.net/grDvW/1/
画像は読み込まれませんが、js フィドル出力ウィンドウのサイズを変更するまで、画像のプレースホルダーが表示されないことさえわかります。少なくとも問題は一貫しています。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css"><title>GameMode | Minecraft</title>
<meta name="keywords" content="keyword">
<meta name="description" content="description">
<meta name="author" content="Jonathan Todd">
</head>
<body>
<div class="wrap"><!-- begin wrap :: this will keep all of the stuff neat and in one place -->
<div class="login-screen bg-dirt"><!-- begin login screen, background dirt :: sets up a background for the login and styles it with a dirt tile and holds all login elements -->
</div><!-- end login screen, background dirt -->
<div class="welcome-screen"><!-- begin welcome screen :: this will hold the elements within the welcome screen, mainly just a title and the two moving wall pieces -->
<div class="wall-left"><!-- begin wall left :: must I explain this? It opens and closes with the other wall -->
<img src="images/wall_left.png">
</div><!-- end wall left -->
<div class="wall-right"><!-- begin wall-right :: must I explain this? It opens and closes with the other wall -->
<img src="images/wall_right.png">
</div><!-- end wall right -->
<img class="welcome-logo" src="images/logo.png">
<img class="welcome-shadows" src="images/shadows_fast.png">
</div><!-- end welcome screen -->
</div><!-- end wrap -->
</body>
</html>
また、私の CSS も非常にシンプルです。
/* Style Setup */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
-webkit-perspective: 6500;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
.wrap, html {
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
/* Style Start */
.bg-dirt { }
.login-screen {
z-index: 0;
}
.welcome-screen {
z-index: 1;
width: 100%;
height: 100%;
}
.wall-left {
position: absolute;
z-index: 2;
height: 100%;
left: 0px;
}
.wall-right {
position: absolute;
z-index: 3;
height: 100%;
right: 0px;
}
.welcome-logo {
position: absolute;
z-index: 4;
margin-left: auto;
margin-right: auto;
}
.welcome-shadows {
position: absolute;
z-index: 5;
width: 100%;
}