如何在加载DOM时避免jquery内容闪烁

Question

在文档准备好后，我运行了一些非常简单的jQuery函数。例如：

$('div.std br').remove();

我使用这个是因为Magento的TinyMCE编辑器如果你有任何剩余的空白，会不断地引发烦人的<br />。这很好但很明显，当页面加载时，我必须查看其中包含所有<br />的丑陋内容，然后它会闪烁并执行更加分散注意力的功能。

有没有办法防止这种情况，或者我应该隐藏内容，直到它被加载为关于主题的类似文章？

Answer 1

  

...我应该隐藏内容，直到它被加载......？

是。您可能希望保留布局中的空间以避免恼人的“跳跃”。

CSS：

div.str {
    visibility: hidden;
}

JS将在

之后放置，或者在结束</body>标记之前放置：

<script>
    $("div.str").find("br").remove();
    $("div.str").css("visibility", "visible");
</script>

答案 1 :(得分：2)

您是否尝试使用CSS隐藏或样式化<br />：

br{ 
  display: none;
}

由于CSS文件可能在内容本身之前加载，因此在内容呈现时，<br />元素将不会显示为开头，因此不会“闪烁”。

答案 2 :(得分：1)

添加此CSS规则：

div.std br {
    display: none;
}

答案 3 :(得分：1)

执行此操作的最佳方法是在对象上将显示设置为none，以便DOM在加载时不会显示它。

<div id="testdiv" style="display:none">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').fadeIn(1000);
});

我的一些旧版项目中有很多代码看起来像这样，虽然它完成了同样的事情：

<div id="testdiv" style="visibility:hidden">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').hide().css('visibility', 'visible');
});

这样他们的图像是使用HTML隐藏的，然后JQuery隐藏它（所以它在这一点上以2种方式隐藏），然后将HTML设置为可见，所以它只是JQuery在DOM中保持它在此时不可见，然后我像平常一样使用它。

答案 4 :(得分：0)

在将数据库添加到数据库之前，或者在将其作为内容返回之前，我会删除服务器端的中断。

Answer 2

您是否尝试使用CSS隐藏或样式化<br />：

br{ 
  display: none;
}

由于CSS文件可能在内容本身之前加载，因此在内容呈现时，<br />元素将不会显示为开头，因此不会“闪烁”。

Answer 3

添加此CSS规则：

div.std br {
    display: none;
}

Answer 4

执行此操作的最佳方法是在对象上将显示设置为none，以便DOM在加载时不会显示它。

<div id="testdiv" style="display:none">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').fadeIn(1000);
});

我的一些旧版项目中有很多代码看起来像这样，虽然它完成了同样的事情：

<div id="testdiv" style="visibility:hidden">Hello</div>

...
...
...

$(document).ready(function () {
    $('#testdiv').hide().css('visibility', 'visible');
});

这样他们的图像是使用HTML隐藏的，然后JQuery隐藏它（所以它在这一点上以2种方式隐藏），然后将HTML设置为可见，所以它只是JQuery在DOM中保持它在此时不可见，然后我像平常一样使用它。

Answer 5

在将数据库添加到数据库之前，或者在将其作为内容返回之前，我会删除服务器端的中断。