190

我在我们的网站上有一个部分加载非常缓慢，因为它正在进行一些密集的呼叫。

知道如何div在页面准备好时说出类似于“正在加载”的内容，然后在一切准备就绪时消失吗？

4

13 回答 13

271

原始答案

我需要这个，经过一些研究，我想出了这个（需要jQuery）：

首先，在<body>标签之后添加：

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

然后将 div 和图像的样式类添加到您的 CSS：

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

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

然后，将此 javascript 添加到您的页面（</body>当然，最好在页面末尾，在结束标记之前）：

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

最后background-color用style类调整加载图片的位置和加载div的位置。

就是这样，应该可以正常工作。但当然你应该有一个ajax-loader.gif地方或使用base64 url​​作为图像的src价值。免费赠品在这里。（右键单击 > 将图像另存为...）

更新

对于 jQuery 3.0 及更高版本，您可以使用：

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

更新

最初的答案来自 jQuery 和 flexbox 时代之前。您现在可以使用许多视图管理库/框架，例如 Angular、React 和 Vue.js。对于 CSS，你有 flexbox 选项。下面是 CSS 替代方案：

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

#loading-image {
  z-index: 100;
}
于 2010-09-01T11:49:39.700 回答
47

该脚本将在页面加载时添加一个覆盖整个窗口的 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>

于 2017-01-18T22:58:07.210 回答
35 

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 中创建的具有最简单淡出效果的页面加载图像：

于 2012-10-07T10:14:57.750 回答
10

我有另一个下面的简单解决方案，它非常适合我。

首先，创建一个名为Lockon类的 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();
});

只要页面加载，上述解决方案就可以了。

现在的问题是在页面加载后，每当我们点击一​​个按钮或一个需要很长时间的事件时，我们需要在客户端点击事件中显示这一点，如下所示

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

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

于 2017-07-17T11:26:22.650 回答
6

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

于 2009-12-05T22:28:29.343 回答
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();
});
于 2009-12-05T22:41:57.087 回答
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">

于 2017-10-17T08:36:12.473 回答
2

这是我最终使用的 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>
于 2016-03-04T16:39:13.903 回答
1

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

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

...或在纯 JavaScript 中：

document.getElementById("myElement").style.display = "none";
于 2009-12-05T22:34:45.573 回答
1

这将与 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); }
}
于 2020-06-01T00:02:52.123 回答
1

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

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

在正文中跳过主要内容链接后的 html.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;
 }
于 2020-06-23T09:16:10.230 回答
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();
  });
于 2014-06-03T23:14:17.790 回答
0

我需要一个闪屏，我通过重用此处列出的部分解决方案来实现它。它使用 Vanilla JS 实现完全的向后兼容性。

第 1 步：在页面顶部添加带有微调器 gif 的背景，然后在加载所有内容时将其删除。

body.has-js::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  transition: all .2s;
  background: white url('/img/spinner.gif') no-repeat center center / 50px;
}
body.loaded::before {
  opacity: 0;
  width: 0;
  height: 0;
}

第 2 步：在开始的 body 标记之后添加一个小脚本以开始显示加载/启动屏幕。

<body>
  <script>
    // Only show loader if JS is available
    document.body.className += ' has-js';
    // Option 1: Hide loader when 'load' event fires
    window.onload = function() { document.body.className += ' loaded'; }
    // Option 2: Hide loader after 2 seconds, in case the 'load' event never fires
    setTimeout(function(){ document.body.className += ' loaded'; }, 1000 * 2);
  </script>
  <!-- Page content goes after this -->
</body>
于 2021-06-04T13:06:32.250 回答