Question

我有一个wordpress网站，我使用supersized插件来全屏显示背景图片滑块。

我希望在正文加载所有网站内容之前显示静态全屏背景图片。

目前，我已经添加了这个HTML：

<html class="no-js">

（我将类no-js添加到html标签中）

对于CSS，我添加了这一行：

.js body { display: none; }

在页脚上，我添加了这个jQuery代码：

<script>
  jQuery('body').fadeIn(5000); // fadein time in ms
</script>

从这里开始，我不知道如何继续。

我尝试使用jquery显示背景，但是......如果我隐藏了身体 - 我实际上什么都不做，直到它会被jQuery加载，对吧？有哪些替代选择？

Answer 1

从此处更改HTML：

<body>
    *your content*
<body>

对此：

<body>
    <div id="bgimage"></div>
    <div id="content">*your content*</div>
<body>

将此css添加到#bgimage：

#bgimage { position: absolute; width: 100%; height: 100%; background-image: url(*image url*); background-size: cover; }

而不是淡化身体，淡出#content淡出#bgimage

我认为这就是@trainoasis的意思。

Answer 2

您可以尝试这样的事情：

＆＃13;

    $(function() {
      window.setTimeout(function() {
        $('body').removeClass('preload'); //remove class preload to hide the image
      }, 5000);
    });

＆＃13;

    body,
    html {
      height: 100%;
      width: 100%;
      position: relative;
    }
    body.preload:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(/* Your image */) no-repeat center center/100% 100% #000;
      z-index: 999;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="preload">
  <h3>content of body...</h3>
</body>

＆＃13;

添加和删除类预加载可以解决问题，因为css伪元素基于此类。

希望这有帮助

我创建了一个fiddle来展示上面的代码

页面介绍 - 身体淡入

2 个答案: