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

发布于 2025-01-02 11:09:26 字数 292 浏览 1 评论 0原文

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

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

我使用它是因为 Magento 的 TinyMCE 编辑器会不断地抛出恼人的 's 如果你有任何剩余的空白。这很好用，但显然在页面加载时我必须查看其中包含所有的丑陋内容，然后它会闪烁并执行更令人分心的功能。

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

原文

I have a few very simple jQuery functions running after the document is ready. For example:

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

I use this because Magento's TinyMCE editor constantly throws in annoying  's if you have any whitespace leftover. This works great but obviously while the page is loading I have to look at the ugly content with all the  s in it, then it flashes and executes the function which is even more distracting.

Is there a way to prevent this or should I be hiding the content until it is loaded as similar articles on the subject suggest?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一页 2025-01-09 11:09:26

...我应该隐藏内容直到加载完毕...吗？

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

CSS：

div.str {
    visibility: hidden;
}

JS 放置在 div 之后，或结束 标签之前：

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

...should I be hiding the content until it is loaded...?

Yes. You might want to preserve the space in the layout to avoid an annoying "jump" too.

CSS:

div.str {
    visibility: hidden;
}

JS to be placed right after the div, or right before the closing </body> tag:

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

回复收藏 0 原文

π浅易 2025-01-09 11:09:26

您是否尝试过使用 CSS 隐藏或设置样式：

br{ 
  display: none;
}

由于 CSS 文件可能在内容本身之前加载，因此在渲染内容时，   元素不会出现开头，因此不会“闪烁”。

Have you tried hiding or styling   using CSS:

br{ 
  display: none;
}

Since the CSS file is probably loaded before the content itself, then by the time the content will be rendered, the   elements won't appear to begin with, and will therefore not 'flash'.

回复收藏 0 原文

冷弦 2025-01-09 11:09:26

添加此 CSS 规则：

div.std br {
    display: none;
}

Add this CSS rules:

div.std br {
    display: none;
}

回复收藏 0 原文

舞袖。长 2025-01-09 11:09:26

执行此操作的最佳方法是简单地将对象上的显示设置为无，以便 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 隐藏它（因此此时它以两种方式隐藏），然后 HTML 设置为可见，所以此时 JQuery 将其在 DOM 中保持不可见，然后我像平常一样使用它。

The best way to do this is to simply set the display to none on the object so that the DOM won't show it as it loads in.

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

...
...
...

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

I have a lot of code in some of my older projects that look like this though that accomplishes the same thing:

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

...
...
...

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

That way they image is hidden using HTML, then JQuery hides it (so its hidden in 2 ways at this point), then the HTML is set to visible, so its just JQuery holding it invisible in the DOM at this point, then I use it like normal.

回复收藏 0 原文