Page elements are still loading after window.on('load', function() {}) is finished?

Question

I want to hide a spinner div once ALL elements are loaded and in position on my page. I put a fadeOut() function on my spinner div in the window.on('load', ..., but I can see the tab/page is still loading even though the elements/assets are not in the correct css position yet. How do I force the spinner div to remain until everything is in place, i.e. until the loading icon on the tab is finished spinning?

This is my code:

$(window).load(function() {
 $('#spinner').fadeOut();
}

jQuery(document).ready(function($){
 // Append the spinner div.
 $("#spinner").append(spinner.el);
}

Which kind of element is still loading? Can you ate least post a minimalistic sample replicating your issue? — A. Wolff, Jul 01 '16 at 13:12
@A.Wolff It seems to be that images etc are loading, but there's lots of css with absolute positioning (I need it for scrollMagic, the plugin I'm using) so while I can see that the images are loaded, they aren't in place yet. So they are in a mess on the page, until they jump into their correct positions, so I want to hide this from the user until it's all sorted in place. — Rebecca O'Riordan, Jul 01 '16 at 13:14
@Don I haven't, I've never used a promise before. How would that work? — Rebecca O'Riordan, Jul 01 '16 at 13:14
@RebeccaO'Sullivan So maybe your relevant code regarding `$(window).on('load', handler);` is wrong. Post it here. Or you are using any async call. But for sure you didn't tell us all — A. Wolff, Jul 01 '16 at 13:15
check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for promise — Don, Jul 01 '16 at 13:16
@RebeccaO'Sullivan So your code for load event is correct, i guess then you are using some ajax to update the DOM, no? — A. Wolff, Jul 01 '16 at 13:18
@A.Wolff I'm not using ajax, it's a very simple page with a lot of images and js for animations. It's as if my problem is that the window is loaded, the document is ready, but the elements are not in place yet, it takes approx 4-5 seconds for everything to be in place. There's a lot of images that add to the size of the page, if that helps? I tired a load event for all 'img' but it made no difference. — Rebecca O'Riordan, Jul 01 '16 at 13:19
@A.Wolff I can't provide a live sample unfortunately, I wish I could. It's for a client, and I haven't been able to replicate this issue outside of this particular environment. I might be able to use a setTimeout for now. — Rebecca O'Riordan, Jul 01 '16 at 13:23
A timeout is for sure not a solution. You'd have better to debug your code until you spot what's going wrong. And i suspect this has nothing to do with load event being fired too early — A. Wolff, Jul 01 '16 at 13:25
Can't load and ready go off at the same time, in which case you could very well be calling the fadeOut before the spinner was even appended? — BenM, Jul 01 '16 at 14:01
@BenM the spinner is appended as I can see it, it disappears when the elements appear, but they are still getting into position. — Rebecca O'Riordan, Jul 01 '16 at 14:05
Do you know the size (dimensions) of the images before they are loaded? You can specify this on the `img` or containing div and then the images won't cause the page to "jump about" as the page loads — freedomn-m, Jul 01 '16 at 14:05

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

It sounds like you have a large volume of CSS and it is taking a long time for the browser to compute the style for each element after all content for the page has loaded. You could do some experiments using your timeout idea, and polling one or more elements on the page to see when the computed style matches the expected style. The last element to be assigned a computed style might vary at each page load, and/or by browser, so you would definitely need to test your method. The example below uses some information from the accepted answer here to poll an element for an expected style.

var expectedTop="5px";

function ready() {
    $('#spinner').fadeOut();
}

function poll() {
    var o = document.getElementById("pollElementId");
    var comp = o.currentStyle || getComputedStyle(o,null);
    if(comp.top==expectedTop) {
        ready();
    }
    else {
        setTimeout("poll()",500);
    }
}

jQuery(document).ready(function($){
    $("#spinner").append(spinner.el);
    poll();
}

Here pollElementId is the id of an element in the DOM that we are positioning via CSS.

Page elements are still loading after window.on('load', function() {}) is finished?

1 Answers1