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.