Question

我为我工作的公司维护一个网站，就在昨天它以某种方式发展了一个我无法解决的问题。我用谷歌搜索了我的屁股，无法找到解决方案。问题是我们页面底部有三个，只有当你点击它们的相关链接时才显示（三个链接的无序列表，每个链接加载一个javascript显示/隐藏功能）。但是从昨天开始，这三个人的表演大约2秒然后消失了，这非常烦人！除非点击，否则它们不应显示。该网站是www.successphotography.com - 看看你自己！任何帮助将不胜感激。相关代码：

<ul class="moreInfo">
<li onclick='swappy("graduation")'>Graduation Photography</li>
<li onclick='swappy("school")'>School Photography</li>
<li onclick='swappy("family")'>Family Photography</li>
</ul>
<div id="graduation">
<--- lots of content here --->
</div
<div id="school">
<--- lots of content here --->
</div>
<div id="family">
<--- lots of content here --->
</div>

swappy函数的javascript是：

    window.onload=function(){

if (document.getElementById("graduation")) { 
    document.getElementById("graduation").style.display = 'none';
    document.getElementById("school").style.display = 'none';
    document.getElementById("family").style.display = 'none';

    }
}
function swappy(myself){
    switch(myself){
        case("graduation"):
            document.getElementById("graduation").style.display = 'block';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'none';
        break;
        case("school"):
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'block';
            document.getElementById("family").style.display = 'none';       
        break;
        case("family"):
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'block';      
        break;
        default:
            document.getElementById("graduation").style.display = 'none';
            document.getElementById("school").style.display = 'none';
            document.getElementById("family").style.display = 'none';
        break;
    }
}

非常感谢任何帮助！非常感谢

Answer 1

由于您已经在使用jQuery，请考虑使用ready处理程序：

$().ready(function(){ /* code to hide elements here */})

而不是您当前的window.onload=function

这将在文档准备就绪时执行您的功能，而不是在窗口加载后执行，并且可以消除您当前看到的闪烁。

Answer 2

这里的黄金法则是：

你应该配置/构建你的CSS和JS，这样你的前端显示（@初始加载）与启用JavaScript和没有Javascript的情况完全相同。

这样你永远不会得到摇摆不定的负载响应。

快速修复：最初使用CSS隐藏div（显示：无）

Answer 3

这是因为您只在window.onload事件发生时隐藏了div，这可能需要一段时间，具体取决于您必须在页面中加载多少元素，延迟，渲染等等。

要避免Javascript FOUC（无格式内容的Flash），您应该通过css隐藏#school和#family元素，但是当js未启用时，您将无法再访问内容那些div。请看一下这个讨论：implementing unobtrusive javascript

怎么能阻止我的div出现几秒钟而消失？

3 个答案: