我在頁面加載時測驗這個簡單的加載影片，在頁面應該顯示之后，或者在這種情況下，一個視頻。問題是盡管頁面/視頻已經加載，但影片會一直持續下去。該視頻正在通過 youtube 嵌入。這是代碼
注意：Youtube 視頻 ID 是一個示例，它不會導致任何地方，但視頻會加載
HTML
<div class = "loadelement"><span class = "spinner"> </span></div>
<iframe width = "100%" height = "530"
src = "https://youtube.com/embed/EXAMPLE" title="Youtube video player "
frameborder = "0" allow = "accelerometer; autoplay ; clipboard-write ; encrypted-media ; gyroscope ; picture-in-picture" allowfullscreen>
</iframe>
CSS
.loadelement {
position : absolute ; top : 0 ; left : 0 ;
height: 100vh ; width: 100%;
background: #fff ; display : flex ;
align-items : center ; justify-content : center ;
}
.spinner {
width : 80px ; height : 80px ;
border : 8px solid #f3f3f3 ;
border-radius : 50% ;
border-top : 8px solid #01101a ;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform : rotate(360deg);
}
}
Javascript
let loaderel = document.querySelector(".loadelement");
window.addEventListener("load", function() {
loaderel.style.display = "None";
});
一直在嘗試自己解決問題，任何幫助都會非常棒。感謝大家。
uj5u.com熱心網友回復：
您的代碼似乎有效。但是您可以嘗試將onload屬性添加到您的iframe以在加載時隱藏加載器iframe。
PS。我還將選擇器更改為 ID 并向您的 loader 元素添加了一個 id，因為您的頁面上可能有多個加載器。
function hideLoader() {
const loaderel = document.querySelector("#loader");
loaderel.style.display = "none";
}
/*
* Below also works if you don't want the iframe onl oad attribute
*
const loaderel = document.querySelector("#loader");
window.addEventListener("load", function() {
loaderel.style.display = "none";
});
*
*/.loadelement {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.spinner {
width: 80px;
height: 80px;
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #01101a;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div id="loader" class="loadelement"><span class="spinner"></span></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/K4TOrB7at0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen onload="hideLoader()"></iframe>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448378.html
標籤：javascript html css 添加事件监听器
下一篇：React中輸入值的自動大寫