如何在页面加载完成之前显示页面加载 div？

【问题标题】：How to show Page Loading div until the page has finished loading?如何在页面加载完成之前显示页面加载 div？
【发布时间】：2010-12-23 15:28:04
【问题描述】：

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

知道如何让div 说出类似于“正在加载”的内容，以便在页面自行准备时显示，然后在一切准备就绪时消失？

【问题讨论】：

    标签： javascript jquery html dom loader


    【解决方案1】：

    原答案

    我需要这个，经过一些研究后我想出了这个（需要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 添加到您的页面（当然，最好在您的页面末尾，在关闭 &lt;/body&gt; 标记之前）：

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

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

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

    更新

    对于 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;
}

    【讨论】：

    • 当重定向到另一个页面时，它保持在同一页面并突然显示所需的页面，然后：在prev page beforeunload以及目标页面中显示加载窗格。 window.onbeforeunload = function () { $('#loading').show(); }
    • +1 简短、甜美、清晰，我喜欢。但是我会删除那个 div 并只留下 (;
    • 加载加载图片需要一段时间，在此之前页面已经加载完毕
    • 查看我的答案以避免在每次页面加载时添加$('#loading').hide();。
    • jquery 3.0 及以上使用：$(window).on('load', function () { $('#loading').hide(); })
    【解决方案2】：

    此脚本将在页面加载时添加一个覆盖整个窗口的 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 标签添加这个？
    • @ManoM $(window).on("load", handler) 在所有 DOM 对象完成加载时触发，包括图像、脚本甚至 iframe。如果您想等待特定图像加载，请使用$('#imageId').on("load", handler)
    • 这对我来说仅在页面首次加载时有效，即在打开或刷新浏览器/选项卡时。但是，当页面打开后加载时，它不会显示。我有一个带有切换显示不同内容的页面，并且在内容之间切换时需要一段时间才能加载。有没有一种方法可以调整相同的代码，不仅在第一次打开页面时加载，而且每次加载都需要一段时间？
    • @Joehat 将$( "#loadingDiv" ).remove(); 替换为$( "#loadingDiv" ).hide(); 并在setTimeout(removeLoader, 2000); 之前添加$( "#loadingDiv" ).show();。我删除了 div 以使页面更轻量级，但此修复使其可重用。
    • 我试过你的代码..这很奇怪。当我调用我的页面时，它显示一个空白页面（它正在加载内容）。几秒钟后（我认为内容已加载），它显示加载程序 2 秒钟，而不是显示整个页面。你可以看看：criferrara.it/crigest/toshiba
    【解决方案3】： 

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

    【讨论】：

      【解决方案4】：

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

      首先，创建一个名为 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 的封面屏幕，它给出了 结果，并且一旦页面在加载窗口上方准备就绪，就会触发并在屏幕完全加载后隐藏封面屏幕。

      【讨论】：

      • 太棒了！只需要使用这些来使其全屏位置：固定；宽度：100vw；高度：100vh;
      • 对不起，你在用 $("#ucNoteGrid_grdViewNotes_ctl01_btnPrint") 做什么
      【解决方案5】：

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

      【讨论】：

      • 你会使用什么事件来做到这一点？ Javascript页面加载？还是有更好的地方？
      • 取决于您是否有其他 JS 为页面进行设置 - 如果有，请在完成后调用它，如果没有，则文档加载工作正常。
      【解决方案6】：

      嗯，这在很大程度上取决于您如何加载“密集调用”中所需的元素，我最初的想法是您正在通过 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' 选项之一与来自 jQuery 的 $(document).ready(...) 可能是要走的路。 $(document).ready() 函数在执行之前等待整个文档结构被加载（但它不等待所有媒体加载）。你会做这样的事情：

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

      【讨论】：

      • 不幸的是，它不是通过 ajax，它在等待 php 脚本从数据库中准备数据，因此加载了一些 html 元素，然后浏览器在加载其余部分之前等待数据表。这可能看起来好像页面已经停止，所以需要在那里显示一些东西来表明“正在发生一些事情”并且不会导致用户离开......
      • 仅供参考：Web 的原理（没有 ajax）是服务器呈现整个页面服务器端，并在完成后将此结果 (html) 发送到浏览器。如果页面的渲染在中间某处停止（而您可以看到页面出现在浏览器中），则它不能是 php 脚本，因为 php 只运行在服务器端。
      • 查看我的答案以避免在每个 ajax 调用中添加 beforeSend 和 success。
      【解决方案7】：

      这是我最终使用的 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 加载的自动完成，加载器就会出现。
      【解决方案8】：

      我的博客将 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;
}
      &lt;div class="loader"&gt;

      【讨论】：

      • 那个&lt;div&gt;标签没有关闭
      【解决方案9】：

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

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

      ...或纯 JavaScript：

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

      【讨论】：

      • 简单并完成工作。从可读性的角度来看，$("#myElement").hide() 不是更容易看吗？
      【解决方案10】：

      这将与 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); }
}

      【讨论】：

        【解决方案11】：

        在您的主题中使用 drupal custom_theme.theme 文件

        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;
 }

        【讨论】：

          【解决方案12】：

          基于@mehyaa 的回答，但要短得多：

          HTML（紧跟在&lt;body&gt; 之后）：

          <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();
  });

          【讨论】：

          • 最好hide()这个元素而不是remove()它，这样你可以重复使用它。
          【解决方案13】：

          我需要一个启动画面，我通过重用此处列出的部分解决方案来实现它。它使用 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>

          【讨论】：

            猜你喜欢
            • 2014-08-26
            • 1970-01-01
            • 2016-01-06
            • 2015-08-31
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode