My website has a background and a main container. I wanted to hide the container until the entire page had loaded, so I included
#cover{opacity:0}
at the beginning of the page and
$(window).load(function() {
$('#cover').css('opacity','1');
});
towards the end, right before the </body> tag. This setup worked perfectly on the initial page load.
ISSUE: However, upon reloading the page, all images and text appeared scattered before loading completely. This behavior seemed to be caused by cached images even though they were within the main container styled with opacity:0, which left me puzzled.
UPDATE 1:
I am utilizing turn.js to turn the entire container into a book, intending for it to become visible once it's fully loaded along with initialized JavaScript.
UPDATE 2:
This is how I am checking for "images loaded" and "initialized JavaScript." It seems to work as intended. Is this approach acceptable for handling the situation?
$(window).load(function(){
$(window).ready(function() {
$('#cover').css('opacity','1');
});
});
$(window).ready(function(){
$(window).load(function() {
$('#cover').css('opacity','1');
});
});