Question:
Preloader loading 2 times in the code
Bug in Preloader:
Preloader loading 2 times in the code, the one which is controlled by javascript to make it “display: none” is getting added and working as expected but the 2nd one is staying as is.
Attaching the code and console screenshot for reference.
What have you already tried:
tried to modify the javascript to call “document.getElementsByClassName” but not working, even though the class name is the same
Code Snippet
<div class="preloader" id="preloader">
<div class="loopIcon" id="loopIcon">
<span class="saying" id="saying">Collecting is a fun and rewarding hobby that allows you to discover and appreciate the stories behind each item. </span>
</div>
</div>
<script type="text/javascript">
(
function() {
//var preload = document.getElementById("preloader");
var preload = document.getElementsByClassName("preloader");
var saying = document.getElementById("saying");
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var loading = 0;
var id = setInterval(frame, 440); // SET TIME FOR PRELOADER
function frame() {
if (loading == 30) {
clearInterval(id);
preload.style.display = "none";
} else {
loading = loading + 1;
if (!isMobile) {
if (loading == 10) {
document.getElementById("preloader").classList.add('hidden');
document.getElementsByClassName("preloader").classList.add('hidden');
}
} else if (isMobile)
{
if (loading == 14) {
document.getElementById("preloader").classList.add('hidden');
document.getElementsByClassName("preloader").classList.add('hidden');
}
}
}
}
})();
</script>
<style>
#preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
overflow: visible;
background: #ffffffe3 url('https://static.wixstatic.com/media/2dfe43_8291b2c0f6014b488e32148641beb8d0~mv2.gif') no-repeat center center; // CHANGE HEX COLOR OR EVEN ADD BACKGROUND IMAGE
display: block;
opacity: 1;
transition: 0.5s opacity ease-in;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(5px);
background-size: 150px;
}
#loopIcon{
width:100%;
height:100%;
background-size: 150px !important;
background:url('https://static.wixstatic.com/media/2dfe43_8291b2c0f6014b488e32148641beb8d0~mv2.gif') no-repeat center center; // CHANGE LINK TO GIF FROM MEDIA LIBRARY
}
#preloader.hidden,.preloader.hidden {
opacity: 0;
}
#saying {
margin: 0 auto;
text-align: center;
width: 80%;
display: flex;
font-size: 16px;
color: grey;
justify-content: center;
align-items: center;
height: 100%;
padding: 80px 0 0 0;
}
</style>
