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");

命令隐藏标签。

任何想法如何解决此闪烁？

score 2 · Accepted Answer

1.尽量防止浏览器默认行为：

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

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

});

无论如何尝试在 CSS 中设置初始 display:none;值，这样你就可以保护由 DOM 加载和之后引起的任何 filckerings - 你的元素被 JS (jQuery) 隐藏

我可以假设您的元素位于页面的末尾，通过设置为导致松散而失去它的高度- 页面的跳转/轻弹。display:none;
documentscrollHeight

尝试使用visibility而不是display.

1 回答 1