方法1

Question

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

有没有办法实现这个目标？

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

中

$(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(){
    $('selector').hide(); // Or you can just have display:none
    });

在某些其他部分中，某些事件会使用某些内容填充您的div

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

Answer 4

Ready on elements将起作用：

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

Answer 5

您可以使用

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

因此，在加载DOM时会执行上述操作。现在您需要做的就是显示在css中设置visibility:hidden的元素。

Answer 6

试试这个：

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

Answer 7

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

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

在jquery中是否有“元素就绪”功能？

7 个答案:

方法1

方法2