javascript - 背景图像没有正确淡入

Question

我一直在为一个单页网站设计一个加载屏幕，加载屏幕只不过是一个 svg Logo ，它自己绘制出来，效果非常好，但是一旦“加载”完成，我就会淡出加载筛选并淡入网站内容。

它工作正常，除了当内容淡出时，由于背景图像，它真的很糟糕，我知道这不是背景图像加载本身，因为根本存在加载屏幕的全部原因是为了让网站有时间加载所有图像，所以出于某种原因淡入不能正常工作..也许这是我设置所有动画的方式，看看:(我使用 jquery 和 animate.css 来实现淡入淡出)

J查询: 设置超时(功能(){ $("#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");
});

在这种情况下，您不需要手动淡入页面内容。一旦页面加载了所有内容并且窗口准备就绪，您的加载屏幕将自动淡出并且您的页面将对用户可见。您页面的背景图片看起来也不错，因为它已经加载到屏幕上了。

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

尝试一下这种方法，希望这能帮助您解决问题。