Is there an "element ready" function in jquery?

Question

I have an element which has a CSS border and the problem is the element is empty until the contents are filled by jQuery, but the border is drawn by CSS from the outset. I would like to be able to do something like make the element visibility hidden until it's ready to display then show element and border in one go.

Is there some way to achieve this?

Edit: the code to display the contents are contained inside

$(window).load(function() {

}

Answer 1

Method 1

One method you could try would be setting the CSS of the element to display:none;. This would hide the element, and calling the following function would cause the element to display on DOM load.

$(document).ready(function () {
  // Put all of jQuery code in here
  $("element").show(); // substitute element for whatever is needed
});

However, I wouldn't suggest this method, because there will be a sudden jump of content once the jQuery executes, because display:none; means that there will be no trace of the element on the page

Method 2

The best method in my opinion would be to use visibility:hidden. This will cause the space where the element usually is to still appear, but there will be white-space in place of the element. That way, when the page loads, there isn't a sudden jump of content. If you use this method, you will need to use the .css() method, because .show() is essentially setting the CSS of the element to display:block; So the code will look like this

$(document).ready(function () {
  // Put all of jQuery code in here
  $("element").css("visibility", "visible") // substitute element for whatever is needed
});

For both of these methods, the CSS will make the element hidden, and this function waits until the entire DOM is loaded before it executes.

Answer 2

You could use jQuery addClass to add a style that gets the border, or perhaps removeClass to remove a class of hidden display:none;

And to answer your title question, it's document.ready that you're looking for!

Answer 3

Hide your item initially.

 $(function(){
    $('selector').hide(); // Or you can just have display:none
    });

In some other section some event fills in your div with some content

....
....//some code that fills in your content
...
$('selector').show();
....
....

Answer 4

Ready on elements will work:

$(document.getElementsByTagName('div')[0]).ready(function() {
// do stuff when div is ready

Answer 5

You could use

$(function(){
  // your code here
});

So the above gets executed when the DOM is loaded. Now all you need to do is show your element which had visibility:hidden set in css.

Answer 6

Try this:

$('#element').bind("DOMSubtreeModified", function () {
    //do stuff
});

Answer 7

Have you tried .css()? You can change the css of an element. Read more here.

Initially, set it as hidden, then remove it.