偶尔刷新页面时，jQuery隐藏的内容会出现几秒钟答案

【问题标题】：Occasionally on refreshing the page the hidden content by jQuery will appear for few seconds偶尔刷新页面时，jQuery隐藏的内容会出现几秒钟
【发布时间】：2017-06-16 22:11:51
【问题描述】：

我创建了一个用于存储隐藏图像的 jQuery 对话框，它只能通过单击链接触发。部分代码如下：

<div id="dialogdialog" style="background-color: white;">
            <div>
                 <div style="clear: right">
                 <a href="#" class="closeDialogButton">
                     <div id="fitClose" class='sprite x' style="float:right;"></div></a>
                 </div>
            </div>
            <div>
                <div id="fitLogoBlack" class='sprite black-logo'></div>
                <br/><br/>
                <img id="fitTitle" src="img/fitguide_title.jpg">
                <img id="fitLogoBlue" src="img/blue.png">
            </div>
            <div>
                <img src="img/topbanner01.jpg">
                <br/>
                <img src="img/slim02.jpg">
            </div>


        </div>



<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>

<script>
    $(function() {
        $("#dialogdialog").dialog({
            width: 900,
            border: 0,
            autoOpen: false,
            modal: true,
            resizeable: false,
            dialogClass:"myClass"

        });
        $("#fitguidePic").on("click", function() {
            $("#dialogdialog").dialog("open");
        });
    });

    $('.closeDialogButton').click(function(e){
        e.preventDefault();
        $('#dialogdialog').dialog('close');
    })
    </script>

而且代码正常，在我点击链接之前可以隐藏图像，但是，偶尔刷新页面时，我会看到隐藏的内容出现在页面上几秒钟，但在整个页面之后完全加载，它将再次隐藏。但这种情况并不是每次刷新都会发生。

我不知道这个问题是什么引起的。刷新时如何阻止图像弹出？谢谢！

【问题讨论】：

标签： javascript jquery html css refresh

【解决方案1】：

将此添加到您的 CSS：

#dialogdialog {
    display: none;
}

由于在浏览器中显示页面不会等待 Javascript 完全加载，因此对话框有时是可见的，因为默认情况下它是可见的。 jQuery 稍后将通过将 CSS 直接附加到元素来“覆盖”这个初始设置。

【讨论】：

【解决方案2】：

如何在刷新时阻止图像弹出？

通过使用 vanilla js（原始 js）。为什么？

我不知道这个问题是什么引起的。

这是因为 jQuery（如果设置正确）仅在整个文档加载后才会加载。因此，当您刷新图像时，首先出现然后隐藏它的代码在此之后加载。任何时候有延迟和加载很慢，如果使用jQuery，你会看到隐藏之前的图片。

Alt 解决方案：您可以在不等待文档完全加载的情况下加载 jQuery，但您的代码可能会中断，这通常是一个非常糟糕的主意。 jQuery 仅适用于整个文档。

【讨论】：

【解决方案3】：

display: none; on #dialogdialog

【讨论】：