0

I have a div on my page which I want to show after all elements (scripts, pictures and so on) finish loading. But it seems that the onload function doesn't work as I can see the page before everything is loaded. I have only one js file linked to my page, and below I showed how I organized the code (hope its a right way). I have also put a broken img link to the page, to test if the function executes without the missing file, and it does.

HTML

<div id="dvLoading"></div>

CSS

#dvLoading{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background: red;
    z-index:9999;
}

JQuery

var onLoad = function(){
    $(window).load(function(){
        $('#dvLoading').fadeOut(500);
    });
}

var someFunction1 = function(){
    //some function
}
var someFunction3 = function(){
    //some function
}
var someFunction3 = function(){
    //some function
}

$(document).ready(function(){
    onLoad(); 
    someFunction1();
    someFunction2();
    someFunction3();
});
Emil Gurbanov
  • 1,014
  • 1
  • 11
  • 32
  • I suspect `$(document).ready()` runs **after** the `$(window).load()` event has already fired. So you're binding to an event that has already happened and won't happen again. – Barmar Sep 26 '15 at 09:42
  • Hmm, appears I'm wrong: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – Barmar Sep 26 '15 at 09:44
  • I have also tried to put the onload function out of the document ready, nothing has changed. – Emil Gurbanov Sep 26 '15 at 09:44
  • 1
    use $(window).load() instead of $(document).ready() – Kushal Vora Sep 26 '15 at 09:44
  • @KushalVora He's already using that in the `onload()` function. You can't bind a new load handler inside the old one. – Barmar Sep 26 '15 at 09:46
  • @KushalVora tried, doesn't work as well – Emil Gurbanov Sep 26 '15 at 09:46
  • I copied your example to a JsFiddle and if I understood what you need, it works fine: http://jsfiddle.net/3gz3f2zr/ Are you getting any browser console errors? – Charmander Sep 26 '15 at 09:56
  • Try a good ol' Ctrl+F5 to clear the cache - force the .JS to load again in case it's referencing an older version. – Eraph Sep 26 '15 at 10:07
  • @Charmander yes, if I put a broken picture link to HTML I get an error in dev tools that it hasn't been found, but in spite of this div still fades out what means that the function executed without waiting all element to be loaded. – Emil Gurbanov Sep 26 '15 at 10:08
  • @Eraph tried, same issue. – Emil Gurbanov Sep 26 '15 at 10:09
  • 2
    I just noticed you're using `fadeOut()`. So the element is never hidden until *after* that's called, but you want it to be hidden to start with? Add `display: none;` to your `#dvLoading` class. – Eraph Sep 26 '15 at 10:12
  • 1
    @EmilGurbanov, I have to go right now, but I'm quite sure that's the expected behaviour. The page has been loaded, no matter if the image was found or not. Imagine if, for example, an entire `onload` event is not triggered because a favicon is missing. – Charmander Sep 26 '15 at 10:12
  • @Charmander I have been reading about the onload function, and was written that the page should not load if any element didn't – Emil Gurbanov Sep 26 '15 at 10:18
  • 1
    As @Charmander explained, The onLoad event will fire once all the elements on the page are loaded.What's meant by loading, that the request to load the elements are completed, It does not care whether the loading was successful or not. Which means that if the image URL is broken, the onLoad event will still fire – Dola Sep 26 '15 at 10:20
  • Hm... this is strange... You are calling $(window) load inside $(document) ready.... As mentioned in comments - hide all elements first (in CSS), and show it on load: http://jsfiddle.net/3gz3f2zr/1/ – sinisake Sep 26 '15 at 10:25
  • @Dola but the main issue is not the missing file, it was just made for a test. The issue is, when I upload the site to a hosting, and run it, I see that div fades out before the pictures are loaded. For instance I use a large image on the top of the page, and the div fades out and its seen how the image is loading step by step. – Emil Gurbanov Sep 26 '15 at 10:27
  • @Eraph, I use the fadeout because the div will contain a loading icon or something, and will be sees until the page is loaded on the background. How can I do it using the display none? I need the div to be hidden after load not seen. – Emil Gurbanov Sep 26 '15 at 10:32
  • 1
    Hm, can't recreate the issue: http://jsfiddle.net/3gz3f2zr/3/ Are you on Mac, maybe? – sinisake Sep 26 '15 at 10:33
  • 1
    @EmilGurbanov , Would you please show us the URL where the issue is happening? I suspect that something else might be causing this. – Dola Sep 26 '15 at 10:44
  • @Dola here is the link http://tornadogassprings.com/ek/index.html – Emil Gurbanov Sep 26 '15 at 11:08
  • @EmilGurbanov , The page you've posted works fine for me (i.e the loader does not disappear until the images are done loading) I am using Google Chrome on Windows. – Dola Sep 26 '15 at 12:10
  • @Dola yes, I have just updated the code. The issue was that I wanted the HTML tag act as the dvLoading and put all the CSS in it and did not consider that the image is in the BODY tag and that is why it was loading at the same time. – Emil Gurbanov Sep 26 '15 at 12:23
  • So guys, I am very sorry for this mistake I made in the question. In my code I wrote the same CSS for HTML tag not for the dvLoading as mentioned in the question. That is why it has confused you and wasn't possible to find the issue. Thanks to everyone for trying to help. – Emil Gurbanov Sep 26 '15 at 12:27

1 Answers1

1

Try this instead : 

$( window ).load(function() {
   $('#dvLoading').show().delay(3000).queue(function(n) {
      $(this).fadeOut("slow").delay(1000); n();
   });
});

CSS

#dvLoading{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: red;
    z-index:9999;
}

Your issue could be that you're trying to call a function which fires onload within a document.ready wrapper.

EDIT

This will show the hidden div and delay the fadeout for however long you need once all resources have loaded.

EXAMPLE

JS FIDDLE

aphextwix
  • 1,531
  • 3
  • 16
  • 26
  • I tried this, it's same. For the test I deleted all the functions from my js file and left only onload function same as you wrote. It still loads the page. – Emil Gurbanov Sep 26 '15 at 10:15
  • This is not the solution I think, as I could just write the code so $('#dvLoading').delay(5000).fadeOut(500) and it would do the same effect am I right? – Emil Gurbanov Sep 26 '15 at 10:37
  • @EmilGurbanov - No, this wouldn't work. You need the function to fire `onload`. So doing the delay by itself wouldn't sync with all of the page requests. I'm only suggesting adding a delay within the `onload` function to provide a small margin for error. Belt and braces. – aphextwix Sep 26 '15 at 10:40
  • I tried the code you wrote, it shows the page right after it loads and after some time the block fades in ans stays.. It seems that something is wrong. – Emil Gurbanov Sep 26 '15 at 11:13
  • @EmilGurbanov - see the example that I've added to my answer. The `div` shows after page load, and then fades out. Is this what you want? – aphextwix Sep 26 '15 at 11:43
  • Thanks for efforts, but this is not what I wanted. Actually I found where was the issue. I asked the question not considering that I write CSS for HTML tag not in the DIV. Thanks again. – Emil Gurbanov Sep 26 '15 at 12:25