背景图像无法正常消失

Question

我一直在为一页网站制作加载屏幕，加载屏幕无非是一个svg徽标，它本身可以很好地绘制出来，但是一旦完成“加载”，我就会淡出加载屏幕并逐渐消失在网站的内容中。

效果很好，除了以下事实：当内容褪色时，由于背景图像而造成的震撼非常严重，我知道这不是背景图像加载本身，因为根本就没有加载屏幕的整个原因是网站加载所有图像的时间，因此由于某种原因，fadein无法正常工作。.也许这是我设置所有动画的方式，请看一下：（我使用jquery和animate.css进行淡化）

jQuery：setTimeout（function（）{$（“＃Builds”）。children（）。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中更改背景URL。 将其替换为您的svg文件，该文件将显示为加载图像。

的JavaScript

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

在这种情况下，您无需手动淡入页面内容。 页面加载完所有内容并准备好窗口后，您的加载屏幕将自动消失，您的页面将对用户可见。 页面的背景图像也不会看起来很糟，因为它已经被加载到了屏幕上。

您可以单击此处以获取更多详细信息。

尝试这种方法，并希望这将帮助您解决问题。