如何删除preloader一旦窗口/文档准备好

我有一个css预加载器，我想显示，而页面加载。这是可见的。但是，我想在页面加载/窗口/文档准备就绪后删除它。这是我遇到困难的部分。如何删除preloader一旦窗口/文档准备好

我收到的控制台以下：

遗漏的类型错误：无法读取空的特性“风格”。上线的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(){ 
 
\t if (document.body) { 
 
\t \t document.dispatchEvent(body); 
 
\t \t clearInterval(intID); 
 
\t } 
 
},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) { 
 
\t var fragment = document.createDocumentFragment(); 
 
\t var temp = document.createElement('div'); 
 

 
\t temp.innerHTML = html; 
 

 
\t while(temp.firstChild) 
 
\t \t fragment.appendChild(temp.firstChild); 
 

 
\t 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(){ 
 
\t document.body.insertBefore(preloader, document.body.childNodes[0]); 
 
}); 
 

 
//function to remove preloader markup 
 
var removePreloader = function() { 
 
\t var preloader = document.getElementById("preload"); 
 
\t preloader.style.opacity = 1; 
 

 
\t var animationID = setInterval(function(){ 
 
\t \t preloader.style.opacity -= 0.1; 
 
\t \t if (preloader.style.opacity <= 0.2) { 
 
\t \t \t preloader.parentNode.removeChild(preloader); 
 
\t \t \t clearInterval(animationID); 
 
\t \t } 
 
\t }, 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，所以从我发现的情况来看，我不确定它是否与该元素无法访问时有关系，因为这些呼叫是在getElementById

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

来源

2016-08-02 Enrique

可能有助于http://stackoverflow.com/questions/2485244/window-onload-seems-to-trigger-before-the-dom-is-loaded-javascript –

试试这个

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

来源

2016-08-02 06:59:59

嘿，安德烈，我改变了HTML中的开头标签，但没有发生任何事情。我必须在别处做出改变吗？ – Enrique

否。此代码必须在加载页面结束时删除预加载器。这是一个工作在你的小提琴 –

你能告诉我你所做的改变，因为我无法让你的代码为我工作。我得到'未捕获的ReferenceError：getElementById未定义'。谢谢你，朋友。 – Enrique

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

执行代码为

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

来源

2016-08-02 07:00:28 Laxminarayan

我明白这个逻辑。谢谢。你会如何建议执行此代码？ – Enrique

嘿，谢谢你的时间。我不再在控制台中收到空错误，但同时当页面加载完成时，CSS预加载器仍未被删除。 – Enrique

如何删除preloader一旦窗口/文档准备好

回答

相关问题