Question

我想在页面加载时显示一个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小提琴。 https://jsfiddle.net/kultura/xpa4vz8e/

我想找到一个使用严格javascript的解决方案，因为我开始尝试学习javascript。

到目前为止，我已经在标签结束之前进一步向下移动了脚本。当警告id'preload'时，控制台也返回null，所以从我发现的内容我不确定它是否与调用{时无法访问的元素有关。 {1}}

您的帮助和清晰度将不胜感激。谢谢你们！

Answer 1

试试这个

<body onload="getElementById('preload').style.display = none;">

Answer 2

JavaScript是异步的。所以代码window.addEventListener('load', removePreloader);已经运行了。因此preload已被删除，您希望对不存在的元素执行操作。所以你得到这个错误。尝试在10秒后执行此代码。你不会得到错误。

执行代码

setTimeout(function() {
   window.addEventListener('load', removePreloader);
}, 6000);

一旦窗口/文档准备就绪，如何删除预加载器

2 个答案: