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

Question

我创建了一个 jQuery 用于存储隐藏图像的对话框，只有单击 link 才会触发该对话框。部分代码如下：

<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>

并且代码有效，在我点击 link 之前，图像可以隐藏，但是，偶尔当我刷新页面时，我会看到隐藏的内容出现在页面上几秒钟，但是整个页面加载完成后，它又会被隐藏。但是并不是每次刷新都会出现这种情况。

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

Answer 1

display: none; on #dialogdialog

Answer 2

How can I stop the image popping up when refreshing?

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

I have no idea what this problem is caused.

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

你会看到隐藏之前的图片

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

Answer 3

将此添加到您的 CSS：

#dialogdialog {
    display: none;
}

因为在浏览器中显示页面不会等待 Javascript 完全加载，所以对话框有时是可见的，因为它默认是可见的。 jQuery 稍后会 'overwrite' 通过将 CSS 直接附加到元素来进行初始设置。

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

Occasionally on refreshing the page the hidden content by jQuery will appear for few seconds

html

javascript

css

jquery

refresh