All geek questions in one place

Hiding an element on a Load () page using jQuery

If I hide some elements on page_load using jquery, the elements flicker for a second of a second when the page is entered in the message and then disappears:

function pageLoad() { $('#panelOne').hide(); $('#panelTwo').hide();

Is there a way to prevent flickering?

I do not want to set the css elements to visibility: hidden, because then calling the jquery.show () method does not display this element later.

+6
source share
4 answers

Setting visibility: hidden does not work, but display: none does. See jsFiddle.

You can do this in the DOMReady event, but it would be easier to do this in CSS.

+6
source

$.show() does not work with elements set to visibility: hidden . You need to use display: none . This will work better for you than using jQuery to hide in the DOM ready and absolutely guarantees that you will not see the flicker.

+2
source

Instead of hiding in pageload, hide it on domready, for example:

 $(function() { ........ });

Replace ...... with your two lines.

Home is already running when the tree house was built, and much earlier than pageLoad. Pageload is waiting for images and things to run. (given that you have pageLoad as follows: <html onload="pageLoad();"> ).

+1
source

Definitely use a finished document as opposed to loading a page:

 $(function() { $('#panelOne, #panelTwo') .hide(); });
+1
source

Source: https://habr.com/ru/post/887978/

More articles:


All Articles