8

我有一个具有 CSS 边框的元素，问题是元素是空的，直到内容被 jQuery 填充，但边框从一开始就由 CSS 绘制。我希望能够做一些事情，比如 隐藏元素可见性，直到它准备好显示，然后一次性显示元素和边框。

有没有办法做到这一点？

编辑：显示内容的代码包含在里面

$(window).load(function() {

}
4

7 回答 7

14

方法一

您可以尝试的一种方法是将元素的 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;意味着页面上不会有元素的踪迹

方法二

我认为最好的方法是使用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 加载完毕后再执行。

于 2013-04-15T23:27:52.930 回答
2

最初隐藏您的项目。

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

在其他一些部分，一些事件用一些内容填充你的 div

....
....//some code that fills in your content
...
$('selector').show();
....
....
于 2013-04-15T23:36:27.957 回答
2

您可以使用 jQueryaddClass添加获取边框的样式，或者removeClass删除隐藏的类display:none;

并回答您的标题问题，这document.ready就是您要寻找的！

于 2013-04-15T23:28:03.400 回答
1

准备好元素将起作用：

$(document.getElementsByTagName('div')[0]).ready(function() {
// do stuff when div is ready
于 2013-11-07T19:30:32.030 回答
0

Try this:

$('#element').bind("DOMSubtreeModified", function () {
    //do stuff
});
于 2015-01-26T13:09:05.897 回答
0

你可以使用

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

所以上面的内容会在加载 DOM 时执行。现在您需要做的就是显示您visibility:hidden在 css 中设置的元素。

于 2013-04-15T23:28:03.340 回答
-2

你试过.css()吗？您可以更改元素的 css。在这里阅读更多。

最初，将其设置为隐藏，然后将其删除。

于 2013-04-15T23:28:45.417 回答