Question

我一直在为一个单页网站的加载屏幕工作，加载屏幕只不过是一个svg标识自己绘制出来的效果非常好，但是一旦'加载'完成后我就会淡出加载屏幕和淡入网站的内容。

它的工作正常，但是当内容消失时，由于背景图像的影响非常糟糕，我知道这不是背景图像加载本身，因为完整的原因是有一个加载屏幕是给网站时间加载所有图像，所以由于某种原因，fadein不能正常工作..也许这是我设置所有动画的方式，看看：（我使用jquery和animate.css作为淡入淡出）

JQuery的： setTimeout（function（）{ $（ “＃构建”）的儿童（）addClass（ “animatedLogo”）;。。

  setTimeout(function() {

    $(".loadingLogo").addClass("fadeOut");

    setTimeout(function() {

      $(".loadingScreen").addClass("fadeOut");

      setTimeout(function() {

        $(".loadingScreen").css('display', 'none');

        setTimeout(function() {

          $("body").css('overflow-y', 'auto');

          $(".contentWrapper").addClass("fadeIn").show();
          $("header").addClass("fadeIn").show();

          setTimeout(function() {

            $("body").css('background-color', "#fff");

          }, 500)
        }, 500)
      }, 500)
    }, 500)
  }, 3400)

HTML：

 <div class="loadingScreen animated">
        <div class="loadingLogo animated">
            <svg>
              //svg logo
            </svg>
        </div>
    </div>

 <div class="contentWrapper animated">
       @yield('content')
 </div>

所以我几乎已经知道我这样做的方式有问题，也许这样做会让性能变得很重？任何有关如何做到这一点的建议都非常感谢！谢谢！

Answer 1

如果要在加载页面内容之前显示加载屏幕，可以使用以下代码替换现有代码：

<强> HTML

<div class="se-pre-con"></div>

<强> CSS

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

注意：更改此css中的后台网址。将其替换为您的svg文件，该文件将显示为加载图像。

<强>的JavaScript

$(window).load(function() {
    // Animate loader off screen
    $(".se-pre-con").fadeOut("slow");
});

在这种情况下，您不需要手动淡入页面内容。页面加载完所有内容和窗口后，您的加载屏幕将自动淡出，用户可以看到您的页面。您的页面背景图片也不会显得不好，因为它已经加载到屏幕上。

您可以Click here了解更多详情。

尝试这种方法并希望这有助于您克服自己的问题。

背景图像没有正确消失

1 个答案: