进度完成时加载网站

Question

我用我的网站名称创建了一个 div。当您进入网站时，您会看到名称已填满（如进度条）。假设当名称COMPLETELY填充时，div 消失;但是当它没有完全填满时它就会消失。或多或少在 50%...

你能帮帮我吗？

**您可以在下一个链接中查看：** tapeHD

这是代码...

JQUERY 代码

$(document).ready(function () {
    /* Loading */
    $(window).load(function () { $('body').addClass('loading'); });

    setTimeout(function() {
        if($('body').hasClass('loading')) {
            $('#loading').fadeOut();
            $('body').removeClass('loading');
            $('body').addClass('loaded');
        }
    }, 2000);

    if($.cookie('showOnlyOnce')){
        $('#loading').hide();
    } else {
        $.cookie('showOnlyOnce', 'showOnlyOnce', { expires: 1 });
        $('#loading').show();
    }
    /* END Loading */
});

CSS3 代码

body.loading #loading .title2 span,
body.loading #loading h1 .progress_bar_container .progress_bar {
    width: 100%;
}

body.loaded #loading .title2 span,
body.loaded #loading h1 .progress_bar_container .progress_bar {
    width: 100%;
}

#loading {
    background-color: #252328;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

#loading .container {
    bottom: 0;
    height: 100%;
    height: 100%;
    left: 0;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 29rem;
}

#loading h1 {
    bottom: 0;
    font-family: CaviarDreams_Bold;
    font-size: 8.2rem;
    height: 1.4em;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

#loading h1 span {
    display: block;
    left: 0;
    line-height: normal;
    position: absolute;
    top: 0;
}

#loading h1 .progress_bar_container {
    background-color: rgba(0, 0, 0, 0.8);    
    bottom: 0;
    box-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    height: 7%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 36%;
}

#loading h1 .progress_bar_container .progress_bar {
    background-color: #FFF;
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0%;

    -webkit-transition: width 2s linear;
       -moz-transition: width 2s linear;
        -ms-transition: width 2s linear;
         -o-transition: width 2s linear;
            transition: width 2s linear;
}

#loading .title1 {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

#loading .title2 { color: #FFF; }

#loading .title2 span {
    overflow: hidden;
    width: 0%;

    -webkit-transition: width 2s linear;
       -moz-transition: width 2s linear;
        -ms-transition: width 2s linear;
         -o-transition: width 2s linear;
            transition: width 2s linear;
}

div 设置了一个 cookie。它每天只显示一次。每次进入网站时清理 cookie 以显示它...

---

我已经用动画功能尝试过这个

var progress = false;

$(window).load(function () { $('body').addClass('loading'); });

if($('body').hasClass('loading')) { progress = true; }

if(progress == true) {
    $("body.loading #loading .tapeHDProgress").animate({ width: "100%" }, 2000, function() {
        $('#loading').fadeOut();
        $('body').removeClass('loading');
        $('body').addClass('loaded');
    });
}

但它不起作用

Answer 1

嗯，我的第一个猜测是，您当前的方法在这方面总是不可靠的。以下是我了解您正在做的事情：

• CSS 配置为加载栏需要 2 秒才能填满。
• 您已设置 Javascript 计时器以在 2 秒后淡出正在加载的 div。
• 这两个进程完全不相关；您指望浏览器的时间精度来同步它们。

与任何高级 CSS 技巧一样，不同的浏览器会以不同的方式处理此问题，因此您无法获得一致的体验。例如，在 Chrome 中效果似乎很好（加载屏幕显示 2 秒，然后在提示时淡出）；在 Firefox 和 Safari 中，屏幕根本不会淡出（您可能需要检查一下；我在 OSX Yosemite 上。）

如果你真的需要同步 2 个进程，我会使用类似 Jquery 的 .animate() 的东西，它允许你指定动画和持续时间，但也允许你指定一段应该执行的 JS 代码 就在动画完成的时候。这样，您就不必依赖 2 个独立的进程来同步；加载栏的完成实际上触发淡出。