我有一个 css 预加载器，我想在页面加载时显示它。这是可见的。但是我想在页面加载后/一旦窗口/文档准备好后删除它。这是我遇到困难的部分。
我在控制台中得到以下信息：
未捕获的类型错误：无法读取 null 的属性“样式”。在 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 'preload' 时也会返回 null，所以根据我的发现，我不确定它是否与调用时无法访问的元素有关getElementById
您的帮助和清晰将不胜感激。多谢你们！