hiding container until fully loaded not working with cached images

Question

I have a website with a background and a main container. I wanted to hide the container until the whole page has been loaded. so i added

#cover{opacity:0}

at the start of the page and

$(window).load(function() {
  $('#cover').css('opacity','1');
});

at the end, just before </body> tag. It works perfectly when page is loaded for the first time.

PROBLEM : If I load the same page once more, it shows all the images and text scattered throughout the page. It works fine once completely loaded. certainly this type of behavior is caused by cached images. but all the images are inside the main container which has opacity:0, This has completely confused me.

UPDATE 1:

I am using turn.js to convert the whole container into a book, i want the book become visible when the book is ready i.e. both loading of images and javascript initialization has completed.

UPDATE 2:

This is how i am checking for "images loaded" and "javascript initialized". it worked as i wanted it to. is this a good way to handle the situation?

$(window).load(function(){
  $(window).ready(function() {
     $('#cover').css('opacity','1');
  });
});

$(window).ready(function(){
  $(window).load(function() {
     $('#cover').css('opacity','1');
  });
});

what is the problem? when the images are cached, they are loaded immediately. whats the desired behaviour? — Alex, Jan 28 '15 at 09:08
images should not be shown until they are positioned with `javascript`, since it looks ugly. — Prakhar Thakur, Jan 28 '15 at 09:11
how can i be sure that both, loading of images and `javascript` initialization has completed. — Prakhar Thakur, Jan 28 '15 at 09:17
you should update your question, because youre now describing a different problem (have a look at xy problem). post your javascript function (or how you initialize it) and then we can help — Alex, Jan 28 '15 at 09:20
@Alex I am using turn.js to convert the whole container into a book. — Prakhar Thakur, Jan 28 '15 at 09:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69726/discussion-between-prakhar-singh-and-alex). — Prakhar Thakur, Jan 28 '15 at 09:46

score 1 · Answer 1 · edited May 23 '17 at 11:57

The problem may be related to your $('window').onload();

Take some time and read this SO post.

what-is-the-difference-between-window-load-and-document-ready

load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.

From the MDC, window.onload:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

From the jQuery API documentation, .ready( handler ):

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

Let me know if this change works.

score 0 · Answer 2 · answered Jan 28 '15 at 08:25

0

You do not call the same block in your CSS (#container) and in your JS (#cover).

answered Jan 28 '15 at 08:25

KyleK

4,643
17
33

i am sorry, it was a silly mistake, i have edited my question. – Prakhar Thakur Jan 28 '15 at 08:31

hiding container until fully loaded not working with cached images

2 Answers2