-1

I'm trying to get my script to run only after my entire page has loaded included the pictures.

So I have been using this code.

$(document).on('load', function() { $('#loading').hide(); });

This does not work, since it never activates. However, when I use window instead of document then it works, but its not what I need. I need everything including pictures to be loaded before activating.

I'm very confused why this does not work.

EDIT

THis is not a basic onload document, vs document ready question. My pictures are are not fully loaded even when this code loads.

$(window).on('load', function(){ $('#loading').hide(); });
JP Foster
  • 1,725
  • 4
  • 17
  • 23

1 Answers1

1

There is no document load event. The load event occurs on the window object.

There is a DOMContentReady event on the document which occurs at a different time than the window load event.

Since you want all resources to be loaded, what you want the window load event like this:

$(window).on('load', function() { 
    $('#loading').hide(); 
});
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks for this. However, I'm finding that sometimes the pictures aren't fully loaded when that function activates. – JP Foster Nov 29 '15 at 20:29
  • @JPFoster - are the pictures you're waiting for coming from `` tags in the HTML source of the page? Or are they part of some content that is added to the page via Javascript? – jfriend00 Nov 29 '15 at 20:36
  • They are tags. I'd also note that they are locally stored. But they are relatively large and takes time to show. – JP Foster Nov 29 '15 at 20:42
  • I think it's because their stored locally and are large files. I think once it gets on a server it will be fine. It works! – JP Foster Nov 30 '15 at 16:11