Is There Any Event Jquery Or Javascript Where Can I Hide Elements Before They Appears In Browser

Now i have onready event handler $(function() { $('element').hide(); }); but element is hiding only after it appears in browser. And it disappear like a flash. Can i bind any

Solution 1:

Can i bind any hide() function before content appears in my browser ?

No. The DOM must be loaded first before being able to manipulate it with javascript. The best way is to simply hide the element using CSS from the server side so that it never shows when the page loads. So define a hidden class in your CSS file:

.hidden {
    display: none;
}

and then apply it to your element:

<divclass="hidden">some hidden content</div>

Solution 2:

Is there a reason why you couldn't apply a class like this to your element

HTML

<divclass="s-hidden">Hello foo!</div>

CSS

.s-hidden { display: none; visibility: hidden; }

Note that visibility:hidden also hides the element from screen-readers, which will still read out the content of you leave this off

Then show it when you need it?

Solution 3:

The DOM must be load before you can access and modify it properly using JavaScript. You should use CSS to hide the elements and then later when the DOM has finished loading you´ll be able to show then as you like.

Solution 4:

Use CSS to hide element:

display:none;