Question

I have a general query about the jquery hide function. I have looked around, and cant seem to find a straight answer. I want to know if the objects being hidden on page load are still loaded in and then hidden, or hidden and then load once a trigger is called. Also, if the the objects are loaded, are there any functions that will only load the hidden element once it is triggered?

Answer 1

If you call .hide() on something inside $(document).ready(), then the element will be loaded as-is from the server, and then hidden once the page has completely loaded.

This can result in a ‘flash’ – seeing the element appear whilst the page is loading, then disappear once it has loaded. The best way to prevent this is to ensure it is rendered by the server with a style of display:none; if it is meant to be hidden initially.

Note that .show() and .hide() do not affect which elements exist in the DOM – i.e. which elements are loaded. Instead, they control the visibility of items once the page has loaded.

If you actually want to dynamically load in parts of the page, then you need to use jQuery’s DOM manipulation methods to add new elements to the page in response to some event.