Chrome 不显示和隐藏加载程序答案

【问题标题】：Chrome does not show and hide loaderChrome 不显示和隐藏加载程序
【发布时间】：2011-11-11 15:50:20
【问题描述】：

我正在使用以下函数在浏览器工作时显示和隐藏包含加载图像的 div。它在 Firefox 中运行良好。在 Chrome 中虽然它不这样做。屏幕保持静止，开始函数调用的按钮处于“单击”状态，即使鼠标不在它上面。如果我使用开发人员工具设置断点，那么我会看到 setVisibility() 函数被调用并且加载器 div 被正确显示和隐藏。

函数如下所示：

    function setVisibility(id, visibility) {
        if(document.getElementById(id)){
            document.getElementById(id).style.display = visibility;
        }
    }

这是一个显示/隐藏调用的示例：

    setVisibility("loader", "inline");
    setVisibility("loader", 'none');

有什么想法吗？

【问题讨论】：

标签： javascript google-chrome loader throbber

【解决方案1】：

我不确定你是否对 jquery 了解很多，但我会包含最新的 jquery 并使用 .show() 和 .hide() 方法...

http://docs.jquery.com/Show

n/m 这个花絮，你用的是显示，可见性功能名称通过我关闭。

【讨论】：

另外，您是否在 ajax 请求期间调用它来显示？如果是这样，请确保在发送 ajax 请求之前设置可见性，然后再次隐藏它。
我不会在 ajax 请求期间调用它。我会使用 jQuery 的 .show() 和 .hide() 方法，但它们会弄乱页面的格式。
它会破坏布局的原因是因为元素不是绝对位置。因此，当图像被隐藏时，它会从 dom 中取出（用于渲染目的），这会导致与其相关的其他元素移动。您可以通过简单地在包含 div （您隐藏的元素的容器）上的 position:relative 来解决这个问题。然后你可以定位：绝对你隐藏的东西并使用 top:,left: 将它定位在你想要的位置...... - 即使使用上面发布的代码，它似乎也会发生同样的情况，因为 display:none; = .hide()
是的，我想我可以这样做，但是否有理由认为这可能发生在 Chrome 而不是 Firefox 上？

【解决方案2】：

希望对你有帮助

我有同样的问题，我真的不知道它是怎么发生的，但它可以使用如下代码中的小延迟来修复。

用此代码替换您的功能

function setVisibility(id, visibility) {
        if(document.getElementById(id)){
            setTimeout(function(){
               document.getElementById(id).style.display = visibility;
            }, 1);
             // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.

        }
    }

【讨论】：