Есть ли функция «элемент готова» в jquery?

Question

У меня есть элемент, который имеет границу CSS, и проблема в том, что элемент пуст, пока содержимое не будет заполнено jQuery, но граница будет нарисована CSS с самого начала. Я хотел бы иметь возможность сделать что-то вроде сделать видимость элемента скрытой, пока она не будет готова к отображению , а затем отобразить элемент и границу за один раз.

Есть ли способ достичь этого?

Edit: код для отображения содержимого содержатся внутри

$(window).load(function() { 

} 

Answer 1

Метод 1

Одним из методов, вы можете попробовать бы настройки CSS элемента к display:none;. Это скроет элемент, и вызов следующей функции вызовет отображение элемента при загрузке DOM.

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

Однако, я не хотел бы предложить этот метод, потому что будет внезапный скачок содержания после того, как JQuery выполняет, потому что display:none; означает, что не будет никакого следа элемента на странице

Метод 2

Лучший метод, на мой взгляд, заключается в использовании visibility:hidden. Это вызовет пространство, в котором элемент обычно должен появляться, но вместо элемента будет пустое пространство. Таким образом, когда страница загружается, не происходит внезапного скачка контента. Если вы используете этот метод, вам нужно будет использовать метод .css(), потому .show() существу настройки CSS элемента в display:block; Таким образом, код будет выглядеть следующим образом

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

Для обоих этих методов CSS будет сделать элемент скрытым, и эта функция ждет, пока весь DOM не будет загружен до его выполнения.

Answer 2

Вы можете использовать JQuery addClass, чтобы добавить стиль, который получает границу, или, возможно, removeClass удалить класс скрытой display:none;

И ответить на ваш вопрос в заголовке, это document.ready, что вы ищете!

Answer 3

Вы можете использовать

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

Так выше запускается на выполнение, когда DOM загружен. Теперь все, что вам нужно сделать, это показать ваш элемент, в котором visibility:hidden установлен в css.

Answer 4

Вы попробовали .css()? Вы можете изменить css элемента. Подробнее here.

Первоначально задайте его как скрытый, затем удалите его.

Answer 5

Скрыть свой товар изначально.

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

В какой-то другой раздел некоторое событие заполняет в DIV с некоторым содержанием

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

Answer 6

Ready на элементах будут работать:

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

Answer 7

Попробуйте это:

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