Question

我在我创建的目标网页上有一个预加载器（通常针对这种类型的东西买干草）。预加载器工作正常，显示，动画一秒钟然后淡出显示网站。

我想要实现的只是在用户首次访问页面时再显示一次，然后再一次显示，直到他们清除缓存或至少长时间缩放。要做到这一点，我正在尝试使用jquery-cookie（https://github.com/carhartl/jquery-cookie） - 但我无法让它工作，每次刷新页面时它仍会显示。我正在使用的标记/脚本位于...

之下

HTML：

<div id="preloader">
    <span></span>
</div>

原始JS（每次访问页面时显示）：

jQuery(document).ready(function($) {
    $(window).load(function(){
        $('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
    });
});

尝试使用Cookie的新JS（不工作）：

$(document).ready(function($) {
    if ($.cookie('noPreloader')) $('#preloader').hide();
        else {
            $(window).load(function(){
            $('#preloader').delay(1200).fadeOut(800,function(){$(this).remove();});
        });
    }
});

我非常感谢有人会因为我有点卡住而对此有所了解！

提前致谢！

Answer 1

我无法看到您为支票创建Cookie的位置。它假设是这样的：

if (!$.cookie('noPreloader')) {
  // show your preloader
  ...
  // and now we create 1 year cookie
  $.cookie('noPreloader', true, {path: '/', expire: 365});
}

请注意 - 在我的示例中，您的块假设在加载时隐藏。之后您会显示它（因为您只想第一次显示它）。

Answer 2

非常感谢UtherTG的帮助！这是我试图达到类似目标的其他人的最终剧本......

$(document).ready(function($) {

    if ($.cookie('noPreloader'))
    {
        $('#preloader').hide();
    } 
    else 
    {
        $(window).load(function() {
            $('#preloader').delay(1200).fadeOut(800,function() {
                $(this).remove();
            });
        });

        // and now we create 1 year cookie
        $.cookie('noPreloader', true, {path: '/', expire: 365});
    }
});

仅显示div（预加载器）一次 - 直到缓存/会话被清除

2 个答案: