使用 'overflow: hidden' (CSS) 和 jQuery 来防止用户滚动加载页面
Using 'overflow: hidden' (CSS) and jQuery to prevent user from scrolling though a loading page
AIM
我想阻止用户在页面加载时滚动。
问题
下面的代码确实有效，它确实阻止了用户在使用时滚动：
$('body').toggleClass('hidden');
.hidden {
overflow: hidden !important;
}
但是，它似乎只是阻止用户在加载程序动画的额外 2 秒内滚动。
尝试
我基本上是从这个问题 How to show Page Loading div until the page has finished loading 中提取代码的。
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide(); //makes page more lightweight
$('body').toggleClass('hidden');
});
}
摘要
我想阻止用户在整个加载过程中滚动页面，即在页面加载期间以及加载动画的额外两秒内。
更新
要更清楚地了解效果，请参阅下面的代码片段：
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide(); //makes page more lightweight
$('body').toggleClass('hidden');
});
}
.hidden {
overflow: hidden;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 1.5em;
height: 1.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: red;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#loadingDiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>My Custom Loader</h2>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg" alt="">
<img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt="">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg" alt="">
忘掉溢出和隐藏 body。只需通过设置 window.scrollTo(0,0) 在 body 标记之前禁用滚动，然后通过删除该事件处理程序在 load 事件中重新启用它。
<!DOCTYPE html>
<html>
<head>
<title>Disable Scroll Until Page is Loaded</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Disable scrolling initially
$(window).on("scroll", preventScroll);
// Once window is loaded...
$(window).on("load", function(){
// Wait 2 more seconds...
setTimeout(function(){
// Re-enable the scroll by removing the previously
// added event handler that cancelled it.
$(window).off("scroll", preventScroll);
$("#loadingDiv").fadeOut(1500); // fade out the loading image
}, 2000);
});
function preventScroll(){
window.scrollTo(0, 0); // Effectively cancells scrolling
}
</script>
</head>
<body>
<img id="loadingDiv" src="https://media3.giphy.com/media/52qtwCtj9OLTi/giphy.gif">
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
</body>
</html>
如果您坚持使用此方法：
$(document).ready(function(){
$('body').addClass('loader');
$(window).on('load', function() {
setTimeout(function(){$('body').removeClass('loader');}, 2000);
});
});
body{
width: 100%;height: 500px;background: red;overflow: auto;
}
.loader{
overflow: hidden !important;width: 100%;height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Body</h1>
</body>
</html>
AIM
我想阻止用户在页面加载时滚动。
问题
下面的代码确实有效，它确实阻止了用户在使用时滚动：
$('body').toggleClass('hidden');
.hidden {
overflow: hidden !important;
}
但是，它似乎只是阻止用户在加载程序动画的额外 2 秒内滚动。
尝试
我基本上是从这个问题 How to show Page Loading div until the page has finished loading 中提取代码的。
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide(); //makes page more lightweight
$('body').toggleClass('hidden');
});
}
摘要
我想阻止用户在整个加载过程中滚动页面，即在页面加载期间以及加载动画的额外两秒内。
更新
要更清楚地了解效果，请参阅下面的代码片段：
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');
$(window).on('load', function() {
$( "#loadingDiv" ).show();
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('body').toggleClass('hidden');
});
function removeLoader() {
$("#loadingDiv").fadeOut(1500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").hide(); //makes page more lightweight
$('body').toggleClass('hidden');
});
}
.hidden {
overflow: hidden;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 1.5em;
height: 1.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: red;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
#loadingDiv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>My Custom Loader</h2>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg" alt="">
<img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt="">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821__340.jpg" alt="">
忘掉溢出和隐藏 body。只需通过设置 window.scrollTo(0,0) 在 body 标记之前禁用滚动，然后通过删除该事件处理程序在 load 事件中重新启用它。
<!DOCTYPE html>
<html>
<head>
<title>Disable Scroll Until Page is Loaded</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Disable scrolling initially
$(window).on("scroll", preventScroll);
// Once window is loaded...
$(window).on("load", function(){
// Wait 2 more seconds...
setTimeout(function(){
// Re-enable the scroll by removing the previously
// added event handler that cancelled it.
$(window).off("scroll", preventScroll);
$("#loadingDiv").fadeOut(1500); // fade out the loading image
}, 2000);
});
function preventScroll(){
window.scrollTo(0, 0); // Effectively cancells scrolling
}
</script>
</head>
<body>
<img id="loadingDiv" src="https://media3.giphy.com/media/52qtwCtj9OLTi/giphy.gif">
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
Lorem ipsum dolor sit amet, per et quas tation dissentias, ad usu illud efficiendi scribentur. Vim at ullum elitr, labores evertitur eum eu, vim urbanitas moderatius an. In sit meliore percipitur, mnesarchum quaerendum ex sed, mel graecis cotidieque conclusionemque in. Aeque graeci dolorum vim in, ea iuvaret inimicus efficiantur vis. Id mea utinam detracto, eam repudiandae definitiones no. In facilis ceteros salutatus eos.
Per aperiri expetendis cu. Mel ea exerci tractatos, his te mollis cotidieque, et nec dicit ignota aperiri. Magna repudiare sententiae mea no, pri te cetero vidisse antiopam, ut sea legere essent. Mea aliquam qualisque ut.
Ad cum diam petentium scribentur, sit te detraxit contentiones, ludus dignissim eam id. Quidam alienum id eam. Enim tota nusquam an per, ius invenire interpretaris necessitatibus at. Nam stet iisque ceteros ut.
Utamur oportere duo ne. Ea adhuc forensibus vis, alii virtute mel at, amet harum mel cu. Eos an ullum aliquando theophrastus. Ei sed laoreet quaestio interpretaris, per error nihil expetendis cu, duo graece iuvaret alienum ne.
Vel posse blandit molestie in, vix no porro iuvaret antiopam. Usu in falli antiopam definiebas, choro tacimates usu te. Equidem scribentur deterruisset at est, sed an harum quaestio laboramus. Erat debitis vix id. Ipsum feugait theophrastus te per, vitae civibus eum ei.
</body>
</html>
如果您坚持使用此方法：
$(document).ready(function(){
$('body').addClass('loader');
$(window).on('load', function() {
setTimeout(function(){$('body').removeClass('loader');}, 2000);
});
});
body{
width: 100%;height: 500px;background: red;overflow: auto;
}
.loader{
overflow: hidden !important;width: 100%;height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Body</h1>
</body>
</html>