ページの読み込み中に表示したい css プリローダーがあります。これは目に見える。ただし、ページが読み込まれた後/ウィンドウ/ドキュメントの準備ができたら、これを削除したいと思います。これは私が苦労している部分です。
コンソールで次を取得しています。
不明な TypeError: null のプロパティ 'style' を読み取れません。script.js ファイルの 40 行目:preloader.style.opacity = 1;
//create a new event
var body = new Event('body');
//check if the body is available
var intID = setInterval(function(){
if (document.body) {
document.dispatchEvent(body);
clearInterval(intID);
}
},10);
//create HTML fragment and then insert fragment inside the DOM -
//If there is a lot to insert into to the DOM, it is faster to create seperately.
//Otherwise, every time we try to insert something, a parse has to pass first to;
//find the body, then go to the div, the image, paragraph etc...
//create HTML fragment
var newFragment = function(html) {
var fragment = document.createDocumentFragment();
var temp = document.createElement('div');
temp.innerHTML = html;
while(temp.firstChild)
fragment.appendChild(temp.firstChild);
return fragment;
};
var preloader = newFragment('<div id="preload"><span class="loading_r">R<span class="period">.</span></span></div>');
//insert preloader when body is ready
document.addEventListener('body', function(){
document.body.insertBefore(preloader, document.body.childNodes[0]);
});
//function to remove preloader markup
var removePreloader = function () {
var preloader = document.getElementById("preload");
preloader.style.opacity = 1;
var animationID = setInterval(function(){
preloader.style.opacity -= 0.1;
if (preloader.style.opacity <= 0.2) {
preloader.parentNode.removeChild(preloader);
clearInterval(animationID);
}
}, 70);
};
//when page is fully loaded remove preloader
window.addEventListener('load', removePreloader);@font-face {
font-family: 'Pier Sans-Regular';
src: url('fonts/pier-regular-webfont.woff2') format('woff2'),
url('fonts/pier-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Adam CG';
src: url('fonts/adam.cg_pro-webfont.woff2') format('woff2'),
url('fonts/adam.cg_pro-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#preload {
font-family: 'Adam CG', sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
}
.loading_r {
color: #87CE84;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
position: fixed;
line-height: 0.8em;
top: 50%;
left: 0;
right: 0;
font-family: ;
text-align: center;
pointer-events: none;
font-size: 4em;
font-weight: bold;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-animation: loading_r 3s ease-in-out infinite;
animation: loading_r 3s ease-in-out infinite;
-webkit-transition: all 0.3s 0.5s ease;
transition: all 0.3s 0.5s ease
}
.loading_r .period {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
display: inline-block;
-webkit-animation: loading_r_period 3s ease-in-out infinite;
animation: loading_r_period 3s ease-in-out infinite
}
@-webkit-keyframes loading_r {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
60% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
68% {
-webkit-transform: scale(1) translate(-0.5em, 0);
transform: scale(1) translate(-0.5em, 0)
}
85% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
}
@keyframes loading_r {
0% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
60% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
68% {
-webkit-transform: scale(1) translate(-0.5em, 0);
transform: scale(1) translate(-0.5em, 0)
}
85% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
100% {
-webkit-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0)
}
}
@-webkit-keyframes loading_r_period {
0% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg)
}
50% {
-webkit-transform: translate(0.5em, 0) rotate(-360deg);
transform: translate(0.5em, 0) rotate(-360deg)
}
60% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
70% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
80% {
-webkit-transform: translate(0.2em, 0) rotate(-360deg);
transform: translate(0.2em, 0) rotate(-360deg)
}
100% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
}
@keyframes loading_r_period {
0% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg)
}
50% {
-webkit-transform: translate(0.5em, 0) rotate(-360deg);
transform: translate(0.5em, 0) rotate(-360deg)
}
60% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
70% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
80% {
-webkit-transform: translate(0.2em, 0) rotate(-360deg);
transform: translate(0.2em, 0) rotate(-360deg)
}
100% {
-webkit-transform: translate(0, 0) rotate(-360deg);
transform: translate(0, 0) rotate(-360deg)
}
}<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
</body>関連するすべてのコードを含む JS Fiddle を添付しました。 https://jsfiddle.net/kultura/xpa4vz8e/
私はJavaScriptを学び始めているので、この特定の例について厳密にJavaScriptを使用して解決策を見つけたいと思います。
これまでのところ、タグの終わりの直前まで、スクリプトをさらに下に移動しました。ID「プリロード」を警告すると、コンソールもnullを返すため、呼び出しが行われたときに要素にアクセスできないことに関係があるかどうかはわかりませんgetElementById
あなたの助けと明確さをいただければ幸いです。みんなありがとう！