如何显示页面加载div,直到页面加载完成?


Answers:


215

我需要这个,经过一番研究,我想到了这个(需要jQuery):

首先,在<body>标签之后添加以下代码:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和图片的样式类添加到CSS:

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

然后,将此JavaScript添加到您的页面中(当然,最好在页面结尾处,在结束</body>标记之前):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

最后,background-colour使用样式类调整加载图像的位置和div 的位置。

就是这样,应该工作正常。但是,当然,您必须在ajax-loader.gif某个地方。这里的免费赠品。(右键单击>将图像另存为...)


5
重定向到另一个页面时,它保留在同一页面中并突然显示所需的页面,然后:在卸载前的上一页和目标页面中显示加载窗格。window.onbeforeunload = function(){$('#loading')。show(); }
Sameh Deabes 2013年

2
+1这是简短,甜美和清晰的,我喜欢。但是,我将删除该div,仅保留<img>(;
Francisco Presencia 2014年

3
加载图像需要花一些时间,直到页面已经加载
完毕

1
请参阅我的回答,以避免增加$('#loading').hide();每个页面的负载。
rybo111 '16


36

该脚本将在页面加载时添加一个覆盖整个窗口的div。它将自动显示仅CSS的加载微调器。它将等待直到窗口(不是文档)完成加载,然后将等待可选的额外几秒钟。

  • 适用于jQuery 3(它具有新的窗口加载事件)
  • 无需图像,但添加一个图像很容易
  • 更改延迟以获取更多品牌或说明
  • 唯一的依赖就是jQuery。

来自https://projects.lukehaas.me/css-loaders的 CSS加载器代码

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}
        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

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


如何为imag标签添加此标签?
马诺M

1
$(window).on("load", handler)当所有DOM对象(包括图像,脚本,甚至是iframe)完成加载时,会触发@ManoM 。如果要等待特定图像加载,请使用$('#imageId').on("load", handler)
Victor Stoddard

对我来说,这仅在首次加载页面(即打开或刷新浏览器/选项卡)时起作用。但是,打开页面后加载页面时不会显示。我有一个带有显示不同内容的切换的页面,并且在内容之间进行切换时需要一段时间才能加载。有没有一种方法可以使我修改相同的代码,不仅可以在第一次打开页面时加载,而且可以在每次加载页面时加载?
Joehat

1
@Joehat替换$( "#loadingDiv" ).remove();$( "#loadingDiv" ).hide();,并添加$( "#loadingDiv" ).show();之前setTimeout(removeLoader, 2000);。我删除了div以使页面更轻巧,但是此修复使其可重用。
维克多·斯托达德

我尝试了您的代码。很奇怪。当我呼叫我的页面时,它显示一个空白页面(正在加载内容)。几秒钟后(我认为内容已加载),它显示加载器2秒钟,而不是显示整个页面。:你可以看看criferrara.it/crigest/toshiba
sunlight76

28

window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>  

使用JS创建的具有最简单淡入效果的页面加载图像:


9

我对此有另一个简单的解决方案,对我来说非常有用。

首先,创建一个名称为Lockon类的CSS,该CSS 是透明的覆盖层,并加载GIF,如下所示

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

现在,我们需要使用此类创建div,以便在每次加载页面时覆盖整个页面

<div id="coverScreen"  class="LockOn">
</div>

现在,只要页面准备就绪,我们就需要隐藏此封面屏幕,以便我们可以限制用户单击/触发任何事件,直到页面准备就绪

$(window).on('load', function () {
$("#coverScreen").hide();
});

每当加载页面时,上述解决方案都可以。

现在的问题是页面加载后,每当我们单击按钮或需要很长时间的事件时,我们需要在客户端click事件中显示此内容,如下所示

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

这意味着当我们单击此打印按钮(需要很长时间才能提供报告)时,它将显示带有GIF的封面屏幕,GIF会给出这个结果,一旦页面准备好,加载功能窗口上方将触发,并隐藏封面屏幕屏幕完全加载后。


1
大!只需要使用这些就可以使其全屏显示位置:宽度:100vw; 高度:100vh;
boateng

6

将内容默认为display:none,然后display:block在完全加载后设置一个事件处理程序,将其设置为或类似。然后,将div设置为display:block带有“ Loading” 的div,并将其设置为与display:none以前相同的事件处理程序。


1
您将使用什么事件来执行此操作?JavaScript页面加载?还是有更好的地方?
英里

取决于您是否有其他JS在为页面设置内容-如果是,请在完成这些操作后调用它,如果没有,则文档加载工作正常。
琥珀色

2

嗯,这很大程度上取决于您如何加载“密集调用”中所需的元素,我最初的想法是,您正在通过ajax进行这些加载。如果是这样,那么您可以使用'beforeSend'选项并进行如下的ajax调用:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

编辑 我看到,在这种情况下,将上述'display:block'/'display:none'选项之一与$(document).ready(...)jQuery 结合使用可能是可行的方法。该$(document).ready()函数在执行之前等待整个文档结构被加载(但是它不会等待所有媒体加载)。您将执行以下操作:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});

不幸的是,它不是通过ajax进行的,它在等待php脚本从数据库准备数据,因此先加载一些html元素,然后浏览器在加载其余部分之前先等待数据表。这看起来好像页面已停滞,因此需要在那里显示一些东西以表明“正在发生”并且不会导致用户离开……
Shadi Almosri

仅供参考:网络(不带ajax)的原理是服务器在服务器端呈现整个页面,并在完成时将结果(html)发送到浏览器。如果页面的显示暂停在中间的某个位置(虽然您可以看到页面显示在浏览器中),则它不能是php脚本,因为php仅在服务器端运行。
彼得

见我的答案,避免加重beforeSendsuccess给每个Ajax调用。
rybo111 '16

2

我的博客可以100%工作。

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
<div class="loader">


1

创建一个<div>包含您的加载消息的元素,提供<div>一个ID,然后在内容加载完成后隐藏<div>

$("#myElement").css("display", "none");

...或使用普通JavaScript:

document.getElementById("myElement").style.display = "none";

简单并完成工作。从可读性的角度来看,难道不是那么$("#myElement").hide()容易吗?
user3613932 '19

1

这是我最终使用的jQuery,它监视所有ajax的启动/停止,因此您无需将其添加到每个ajax调用中:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

用于加载容器和内容的CSS(主要来自mehyaa的答案)以及一个hide类:

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>

问题是,如果我在输入中加载了ajax加载的自动完成功能,则将显示加载器。
卢卡斯(Lucas)

0

基于@mehyaa答案,但简短得多:

HTML(紧随<body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

Javascript(jQuery,因为我已经在使用它):

$(window).load(function() {
  $('#loading').remove();
  });

1
hide()对元素而不是元素更好remove(),以便您可以重用它。
rybo111 '16

0

这将与api调用同步。触发api调用时,将显示加载程序。当api调用成功时,加载程序将被删除。这可以用于页面加载或在api调用期间使用。

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

的CSS

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

0

用于主题custom_theme.theme文件中的drupal

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

在html.twig文件中跳过主体中的主要内容链接后

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}  

在css文件中

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.