Loading page jQuery won't get past page loading

Question

hoping you can help on something.. new to jQuery & javascript, but trying to have a loading cover page, so all the content is showed at once, but its stuck and wont go past the loading page, yet on the jsfiddle it will go past the loading page which doesnt make sense.

here's the fiddle - http://jsfiddle.net/adeneo/Egtwx/1/

and here's my code (which is the same...

 <div id="cover">LOADING</div>

 <script>

 $(window).on('load', function() {
   $("#cover").fadeOut(1000);
  });

   //jsFiddle does not fire the window onload properly, substituted with fake         load

function newW() {
  $(window).load();
}
setTimeout(newW, 100);


 </script>

here is all the code in my script tag at the moment, maybe this is clashing and causing it not to work..?

<script>
$(window).ready(function() {
  $("#cover").fadeOut(2000);
});

//jsFiddle does not fire the window onload properly, substituted with fake      load

function newW() {
  $(window).load();
}
setTimeout(newW, 100);

$(document).ready(function() {
  //Check to see if the window is top if not then display button
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
    } else {
      $('.scrollToTop').fadeOut();
    }
  });
  //Click event to scroll to top
  $('.scrollToTop').click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });
});
</script>

Please reference this: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready — Mark Schultheiss, May 21 '16 at 17:08

Michael Gaskill · Accepted Answer · 2016-05-21T00:07:11.993

1

In Chrome, you have to change your settings to allow local data to be set.

To change this, go to Settings > Privacy > Content settings, and change the cookies setting to "Allow local data to be set".

This will solve the issue for your browser, but not for your users' browsers. Instead, you'll want to use $(document), rather than $(window), since $(document) isn't affected by security settings.

The "load" event is actually the "ready" event, so if you change that, it works.

$(window).on("ready", function() {
    $("#cover").fadeOut(2000);
});

I typically use this form, as it's more "modern" jQuery style:

$(window).ready(function() {
    $("#cover").fadeOut(2000);
});

edited May 21 '16 at 00:07

answered May 20 '16 at 23:30

Michael Gaskill

7,567
10
37
39

unfortunately, it doesn't seem to have solved it making the changes? – wezyourboat May 20 '16 at 23:33
aah, still not working! tried with window and document... hmm – wezyourboat May 21 '16 at 00:10
Paste my last bit of code into your fiddle (replace all of the javascript there) and you can see that it works. Is there something different in your application that may be causing it not to work? – Michael Gaskill May 21 '16 at 00:12
yeah that works thanks, but i can't seem to get it working on mine... ive added all of my script tag to the post-- maybe it is clashing with other code, i dont know? could you have a wee look please – wezyourboat May 21 '16 at 11:35
I tested your code in jsFiddle, and once I removed the `` tags, it worked just fine. The browser console told me exactly what was wrong, and jsFiddle gave an error message that said "Only paste Javascript, not HTML, into the Javascript window. I hope that helps. – Michael Gaskill May 22 '16 at 01:11
sorry, but ive tried and it still doesnt load past the cover screen :( ah – wezyourboat May 22 '16 at 12:15
@wezyourboat It doesn't work for you, even without the `` tags, like I mentioned in my last comment? I just pasted the whole body of your code into your jsFiddle, and it worked perfectly for me. I removed the `setTimeout`, as well, since that just tried to forcibly call $(window).load(). – Michael Gaskill May 22 '16 at 14:33
1

The ready is really `$( document ).ready( handler )` even with the `$(window).ready`, "If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately" this typically fires prior to the `window.onLoad` and is a jQuery event, the `$(document).on( "ready", handler )`, deprecated as of jQuery 1.8. Doc:https://api.jquery.com/ready/ – Mark Schultheiss May 23 '16 at 14:42

score 1 · Answer 2 · answered May 21 '16 at 17:27

1

Your fiddle has your code wrapped in onload via the fiddle drop down which is when your setTimeout is executed..

You should be able to use this for the onload event:

Note I created a custom event to make it obvious what was happening.

$(window).on('myload', function() {
  $("#cover").fadeOut(200);
});

function newW() {
  setTimeout(function() {
    $(window).trigger('myload');
  }, 1000);
}
window.onload = newW;

Note that both of your posted code segments differ a bit.

answered May 21 '16 at 17:27

Mark Schultheiss

28,892
9
63
88

thanks for the reply, but ive used your code and it still doesnt load past the cover screen :( – wezyourboat May 22 '16 at 12:13
Note that likely this event has already fired on your page. Note the the `$(document).ready(handler)` will execute immediately if that event has already fired. – Mark Schultheiss May 23 '16 at 14:44

Loading page jQuery won't get past page loading

2 Answers2