如何刪除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一旦窗口/文檔準備好

回答

相關問題