在第一页访问时加载标记仅显示一次答案

【问题标题】：Loading markup to show only once, on first page visit在第一页访问时加载标记仅显示一次
【发布时间】：2013-11-08 06:59:07
【问题描述】：

我有一个加载标记，它覆盖了等待 document.ready() 函数触发的整个窗口。然后我的加载标记消失，真正的内容出现了。

我的问题是，当我再次点击主页时，我仍在网站上导航时，会出现加载标记，即使是很短的时间，因为代码会再次执行。

我不想在所有图像都处于临时状态后再次等待，我想直接进入主页并保持加载 div 显示：无。

如何在每次新访问网站时只在主页上执行一次加载页面？

【问题讨论】：

尝试将 cookie 值设置几个小时并检查该 cookie。如果不存在，则显示加载器，否则不显示。
发布一些代码....这是您编写所有加载内容的地方。
@NagaHarishMovva 我尝试使用 cookie，但我可能做错了什么： $(function () { if (!isset($_COOKIE["once"])) { $(document).ready (function(){ $("#topBackground").hide(); }); $(window).load(function(){ $("#loading").fadeOut("slow"); $("# topBackground").fadeIn("slow"); }); } else { $("#topBackground").show(); $("#loading").hide(); setcookie("once", "1" , time()+600, "/"); } });

标签： jquery html loading

【解决方案1】：

这是代码示例。请使用它来实现您的需求。在此示例代码中，我将 cookie 过期时间设置为 8 小时 cookieExpiry.setTime(cookieExpiry.getTime() + (8 * 3600 * 1000));。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #WelcomeDiv, #SecondTimeDiv {
            display:none;
        }
    </style>
</head>
<body>

    <div id="WelcomeDiv">This div will visible only first time with in 8 hours</div>
    <div id="SecondTimeDiv">This div will show with in that 8 hours..</div>
    <script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            if (document.cookie.indexOf("visited") >= 0) {
                //Don't open any pop up here... You can do something here
                alert("Pop up already shown");
                $("#SecondTimeDiv").show();
            }
            else {
                // set a new cookie..
                var cookieExpiry = new Date();
                cookieExpiry.setTime(cookieExpiry.getTime() + (8 * 3600 * 1000)); // 8 hours
                document.cookie = "visited=yes; expires=" + cookieExpiry.toGMTString();
                alert("Show pop up here");//Do here something...
                $("#WelcomeDiv").show();
            }
        });
    </script>
</body>
</html>

希望这对您的需求有所帮助..请检查所有浏览器..我只在 Firefox 中测试..

【讨论】：

谢谢您，这对您的回复非常有帮助，很抱歉回复晚了。我改变了项目，然后又回来了。