jquery - 进度完成时加载网站

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 上。)

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