Question

我正在尝试构建一个预加载器DIV，该预加载器DIV覆盖该页面，直到页面被加载为止。但是，当可见预加载器DIV时，我无法禁用页面滚动：

$('body').css('overflow-y','hidden');
$('body').css('position','fixed');

$(window).on("load", function() {
  $('#preloader').delay(2000).fadeOut('slow');
  $('body').css('overflow-y','auto');
  $('body').css('position','relative');
})

Answer 1

据我了解，您需要在页面上显示加载程序，直到完全加载相应的页面。

为此，这里是解决方案：在开始标记后添加以下HTML。该加载程序div将在页面加载时显示加载图像。

<div class="loader"></div>

使用以下CSS在加载程序div上显示加载图像，使加载图像位于页面的中心，并用透明的白色背景覆盖整个屏幕。

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}

首先包括jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
$(window).load(function() {$(".loader").fadeOut("slow");});
</script>

还要确保将整个JavaScript代码都放置在标记下。

使用JQuery禁用页面滚动

1 个答案: