Just a quick overview.
I currently have a loading screen that appears before the website finishes loading for a specified time. What I'm looking to achieve is a method to check if certain elements are loaded and then remove the loading screen, rather than relying on a fixed duration.
In my example, I want to determine when images have been completely loaded and displayed in order to end the loading screen. Additionally, I would like to learn how to apply this technique to any other element, like a random div or paragraph if feasible.
fiddle: https://jsfiddle.net/jzhang172/Lyv17L0n/1/
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 500);
});.loaded{
transition:1s;
}
.content{
background:gray;
height:500px;
width:100%;
}
#loader-wrapper{
position:fixed;
background:black;
top:0;
bottom:0;
left:0;
right:0;
transition:1s;
}
.loaded #loader-wrapper{
opacity:0;
}
.loader-section{
position:fixed;
top:0;
bottom:0;
background:red;
z-index:5;
width:51%;
transition:1s;
opacity:1;
}
.section-left{
left:0;
}
.section-right{
right:0;
}
.loaded .loader-section.section-left{
opacity:0;
transform:translateX(-100%);
transition:1s;
}
.loaded .loader-section.section-right{
opacity:0;
transform:translateX(100%);
transition:1s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
<img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
</div>
</body>