Slow loading speed when using window.onload

Question

I'm using this script to hide the div with the id #main-slider.

But every time I load my page I can see the div for like 1 or 2 seconds and then it disappears, is there any way to make it take effect sooner?

Thank you.

window.onload = function() {
    if($(window).width() > 991) 
    {
        $('#main-slider').removeClass('hidden');
    }
    else
    {
        $('#main-slider').addClass('hidden');
    }
}

You could use the `DOMContentLoaded` event – nick zoum Jun 02 '17 at 09:13 — nick zoum, Jun 02 '17 at 09:13

score 1 · Answer 1 · answered Jun 02 '17 at 09:16

1

window.onload waits for every element to be loaded correctly. You can either use document.onload or you can use the event DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(event) {
    // do something
});

answered Jun 02 '17 at 09:16

StuntHacks

457
3
15

score 1 · Answer 2 · answered Jun 02 '17 at 09:17

1

Maybe you should use css @media for that. Try that:

@media (min-width: 991px) {
  #my-element {
      display: none;
  }
}

answered Jun 02 '17 at 09:17

Lukas Gund

639
1
9
27

on my case it's gonna be max-width: 991px, it works too, thank you – Uchiwayas Jun 02 '17 at 09:24

score 0 · Answer 3 · answered Jun 02 '17 at 09:13

0

Use document.onload instead, it's fired earlier. Reference: https://stackoverflow.com/a/588048/4108884

answered Jun 02 '17 at 09:13

Samuil Petrov

542
1
13
24

Yeap, [Here is an example](http://web.archive.org/web/20150405114023/http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html) – nick zoum Jun 02 '17 at 09:14

score 0 · Answer 4 · answered Jun 02 '17 at 09:17

0

Add the class 'hidden' to the 'main-slider' html element in the html page. So the class get added at first, so that the main-slider element is hidden and then according to the condition it gets visible or not. Now with your check, it should work

answered Jun 02 '17 at 09:17

Haroon

111
6

Slow loading speed when using window.onload

4 Answers4