Javascript 预加载包含不可见层的封面页

我已经创建了一个预加载程序，它可以很好地工作，除了当它离开时，它仍然作为一个不可见的层覆盖着页面上的所有内容。因此，像链接这样的内容都不能被点击。如何解决这个问题，但仍然保持动画

JS:

---

将脚本更改为此

$(document).ready(function() {

    setTimeout(function(){
        $('body').addClass('loaded');
        $('#preloader_wrap').remove();
    }, 2000);

});

---

这将在加载页面后完全删除该层。

将脚本更改为此

$(document).ready(function() {

    setTimeout(function(){
        $('body').addClass('loaded');
        $('#preloader_wrap').remove();
    }, 2000);

});

---

这将在页面加载后完全删除该层。

您的加载区域的z索引为1010，将其置于其他所有内容的前面，而您不会删除该层，也不会删除元素本身。因为它的宽度和高度都是100%，所以它会阻塞整个页面

你可以用CSS来解决这个问题。您已经在这样做了：

body.loaded .section{
  width:0;
}

body.loaded #content{
  opacity: 0;
}

然而，这只隐藏了装载机的内部部分，而不是整个内容。改为这样做：

body.loaded #preloader_wrap {
  display:none;
}

---

请参阅工作示例：

您的加载程序区域的z索引为1010，这将它置于其他所有内容的前面，并且您不会删除它，也不会删除元素本身。因为它的宽度和高度都是100%，所以它会阻塞整个页面

你可以用CSS来解决这个问题。您已经在这样做了：

body.loaded .section{
  width:0;
}

body.loaded #content{
  opacity: 0;
}

然而，这只隐藏了装载机的内部部分，而不是整个内容。改为这样做：

body.loaded #preloader_wrap {
  display:none;
}

---

请参阅工作示例：

这基本上是预加载程序包装上的z索引问题您可以在加载程序加载后用

$（“#preload_wrap”）.css（“z-index”，“-1”）

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'body'）.addClass（'loaded'）；
$（“#preload_wrap”）.css（“z-index”，“-1”）；
}, 2000);
});
*{
保证金：0；
填充：0；
}
身体{
背景色：#666666；
宽度：100%；
}
#预紧器{
z指数：1010；
位置：固定；
排名：0；
左：0；
右：0；
}
.科{
位置：固定；
宽度：50%；
身高：100%；
背景色：黑色；
排名：0；
过渡：宽度1s；
}
#左派{
左：0；
}
#右派{
右：0；
}
#内容{
位置：相对位置；
保证金：100px自动0自动；
宽度：600px；
过渡：所有1；
}
#img{
高度：200px；
宽度：300px；
背景色：红色；
保证金：0自动；
}
#加载杆{
高度：50px；
宽度：50px；
保证金：30像素自动；
}
#加载杆分区{
身高：100%；
宽度：100%；
边框底部：4px实心#ffffff；
左边框：4px实心透明；
边界半径：100%；
动画：旋转0.9秒线性无限；
-webkit动画：旋转0.9秒线性无限；
-moz动画：旋转0.9秒线性无限；
-o动画：旋转0.9秒线性无限；
}
@关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
body.loaded.section{
宽度：0；
}
body.loaded#内容{
不透明度：0；
}
标题{
宽度：100%；
高度：75px；
背景颜色：蓝色；
位置：固定；
排名：0；
z指数：1000；
}
保险商实验室{
列表样式类型：无；
利润率：10px自动；
宽度：300px；
}
ulli{
显示：内联块；
字体大小：40px；
}
ullia{
颜色：白色；
}

萨萨
达斯萨达德





这基本上是一个预加载包装上的z索引问题您可以在加载程序加载后用
$（“#preload_wrap”）.css（“z-index”，“-1”）


$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'body'）.addClass（'loaded'）；
$（“#preload_wrap”）.css（“z-index”，“-1”）；
}, 2000);
});
*{
保证金：0；
填充：0；
}
身体{
背景色：#666666；
宽度：100%；
}
#预紧器{
z指数：1010；
位置：固定；
排名：0；
左：0；
右：0；
}
.科{
位置：固定；
宽度：50%；
身高：100%；
背景色：黑色；
排名：0；
过渡：宽度1s；
}
#左派{
左：0；
}
#右派{
右：0；
}
#内容{
位置：相对位置；
保证金：100px自动0自动；
宽度：600px；
过渡：所有1；
}
#img{
高度：200px；
宽度：300px；
背景色：红色；
保证金：0自动；
}
#加载杆{
高度：50px；
宽度：50px；
保证金：30像素自动；
}
#加载杆分区{
身高：100%；
宽度：100%；
边框底部：4px实心#ffffff；
左边框：4px实心透明；
边界半径：100%；
动画：旋转0.9秒线性无限；
-webkit动画：旋转0.9秒线性无限；
-moz动画：旋转0.9秒线性无限；
-o动画：旋转0.9秒线性无限；
}
@关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
body.loaded.section{
宽度：0；
}
body.loaded#内容{
不透明度：0；
}
标题{
宽度：100%；
高度：75px；
背景颜色：蓝色；
位置：固定；
排名：0；
z指数：1000；
}
保险商实验室{
列表样式类型：无；
利润率：10px自动；
宽度：300px；
}
ulli{
显示：内联块；
字体大小：40px；
}
ullia{
颜色：白色；
}

萨萨
达斯萨达德





我不太清楚您试图隐藏标记的哪些部分，但假设它是preload_wrap元素中的所有内容（如果不是，我会将该标记移到它之外），您遇到的问题是，由于z索引较高，该元素堆叠在其他元素之上

最简单的修复方法是添加以下CSS：

body.loaded #preloader_wrap {
  display: none;
}

我可以看到这打破了你的动画，你可以考虑如下：

body.loaded #content{
  opacity: 0;
  display: none;
}

然而，这感觉像是一个黑客，因为我们不会在这里隐藏包装，因此，如果在它的任何其他东西给它的高度，它仍然会覆盖页面的一部分

我会考虑参考文献。