javascript - 将 div 的显示设置为无时，JQuery 导致闪烁

Question

首先我会说这个问题与页面加载无关。我知道修复页面加载闪烁是这里提出的一个常见问题。

我有一个标签，其中包含用于将数据插入 MySQL 数据库的表单。这个标签放在我的 index.php 文档的末尾。然后我将 CSS 设置为

   display: none; position: absolute; top: 20px; left: 20px;

当在页面上单击适当的按钮时，我设置了一个 onclick 监听器，将 CSS 更改为阻止:

    $("#insertForm").css("display", "block");

此时一切都很好，但是当用户单击链接(使用与之关联的 onclick 监听器)隐藏表单时，它会在隐藏 div 标记时导致令人讨厌的屏幕闪烁。我正在使用

    $("#insertForm").css("display", "none");

隐藏标签的命令。

有什么办法可以解决这种闪烁问题吗？

Answer 1

1.尽量避免浏览器的默认行为:

$('#clicker').on('click', function( e ){

    e.preventDefault();
  
    // do wat you do

});

http://api.jquery.com/event.preventDefault/

无论如何，请尝试在 CSS 中设置 initial display:none;，这样您就可以保护由正在加载的 DOM 以及紧随其后引起的任何闪烁 - 您的元素被 JS (jQuery) 隐藏

2.再读一遍你的问题

我可以假设您的元素位于页面末尾，通过设置为 display:none;
失去了它的 HEIGHT导致 document 松动 scrollHeight - 您的页面出现 jump/flick。

尝试使用 visibility 而不是 display。