堆栈内存溢出
  简体   繁体   English

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

[英]How to show Page Loading div until the page has finished loading?

 原文  2009-12-05 22:24:13  1   13    javascript/ jquery/ html/ dom/ loader

问题描述

I have a section on our website that loads quite slowly as it's doing some intensive calls.我在我们的网站上有一个部分加载速度很慢，因为它正在执行一些密集调用。

Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?知道如何让div说类似于“加载”的内容，以便在页面准备好自己时显示，然后在一切准备就绪后消失吗？

13 个解决方案

解决方案1
 260  2010-09-01 11:49:39

Original Answer原答案

I've needed this and after some research I came up with this ( jQuery needed):我需要这个，经过一些研究，我想出了这个（需要jQuery ）：

First, right after the <body> tag add this:首先，在<body>标签之后添加：

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

Then add the style class for the div and image to your CSS:然后将 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;
}

Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):然后，将此 javascript 添加到您的页面（当然，最好在您的页面末尾，在您关闭</body>标记之前）：

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

Finally, adjust the position of the loading image and the background-color of the loading div with the style class.最后，使用样式类调整加载图像的位置和加载 div 的background-color 。

This is it, should work just fine.就是这样，应该可以正常工作。 But of course you should have an ajax-loader.gif somewhere or use base64 url for image's src value.但是当然你应该在某处有一个ajax-loader.gif或者使用 base64 url​​ 作为图像的src值。 Freebies here .赠品在这里。 (Right-click > Save Image As...) （右键单击 > 将图像另存为...）

Update更新

For jQuery 3.0 and above you can use:对于 jQuery 3.0 及更高版本，您可以使用：

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

Update更新

The original answer is from jQuery and before flexbox era.最初的答案来自 jQuery 和 flexbox 时代之前。 You can use many view management libraries / frameworks now like Angular, React and Vue.js.您现在可以使用许多视图管理库/框架，例如 Angular、React 和 Vue.js。 And for CSS you have flexbox option.对于 CSS，您有 flexbox 选项。 Below is CSS alternative:以下是 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;
}

解决方案2
 43  2017-01-18 22:58:07

This script will add a div that covers the entire window as the page loads.该脚本将在页面加载时添加一个覆盖整个窗口的 div。 It will show a CSS-only loading spinner automatically.它将自动显示仅 CSS 加载微调器。 It will wait until the window (not the document) finishes loading, then it will wait an optional extra few seconds.它将等到窗口（不是文档）完成加载，然后它会等待可选的额外几秒钟。

  • Works with jQuery 3 (it has a new window load event)适用于 jQuery 3（它有一个新的窗口加载事件）
  • No image needed but it's easy to add one不需要图片，但很容易添加一张
  • Change the delay for more branding or instructions更改延迟以获得更多品牌或说明
  • Only dependency is jQuery.唯一的依赖是 jQuery。

CSS loader code from https://projects.lukehaas.me/css-loaders来自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>

解决方案3
 34  2012-10-07 10:14:57

 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>

Page loading image with simplest fadeout effect created in JS: JS创建的最简单淡出效果的页面加载图片：

解决方案4
 10  2017-07-17 11:26:22

I have another below simple solution for this which perfectly worked for me.我有另一个以下简单的解决方案，它对我来说非常有用。

First of all, create a CSS with name Lockon class which is transparent overlay along with loading GIF as shown below首先，创建一个名为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;
}

Now we need to create our div with this class which cover entire page as an overlay whenever the page is getting loaded现在我们需要用这个类创建我们的 div，它在页面加载时覆盖整个页面作为覆盖

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

Now we need to hide this cover screen whenever the page is ready and so that we can restrict the user from clicking/firing any event until the page is ready现在我们需要在页面准备好时隐藏这个封面屏幕，这样我们就可以限制用户在页面准备好之前点击/触发任何事件

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

Above solution will be fine whenever the page is loading.每当页面加载时，上述解决方案都可以。

Now the question is after the page is loaded, whenever we click a button or an event which will take a long time, we need to show this in the client click event as shown below现在的问题是在页面加载后，每当我们点击一​​个按钮或一个需要很长时间的事件时，我们需要在客户端点击事件中显示这一点，如下所示

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

That means when we click this print button (which will take a long time to give the report) it will show our cover screen with GIF which gives这意味着当我们点击这个打印按钮（这将需要很长时间才能给出报告）时，它会显示我们的封面屏幕和 GIF，它给出这个 result and once the page is ready above windows on load function will fire and which hide the cover screen once the screen is fully loaded.结果，一旦页面在加载功能的窗口上方准备就绪，就会触发，一旦屏幕完全加载，就会隐藏封面屏幕。

解决方案5
 6  2009-12-05 22:28:29

Default the contents to display:none and then have an event handler that sets it to display:block or similar after it's fully loaded.默认内容为display:none ，然后有一个事件处理程序，在它完全加载后将其设置为display:block或类似的。 Then have a div that's set to display:block with "Loading" in it, and set it to display:none in the same event handler as before.然后将一个 div 设置为display:block其中包含“Loading”，并在与之前相同的事件处理程序中将其设置为display:none 。

解决方案6
 2  2009-12-05 22:41:57

Well, this largely depends on how you're loading the elements needed in the 'intensive call', my initial thought is that you're doing those loads via ajax.嗯，这在很大程度上取决于您如何加载“密集调用”中所需的元素，我最初的想法是您通过 ajax 进行这些加载。 If that's the case, then you could use the 'beforeSend' option and make an ajax call like this:如果是这种情况，那么您可以使用 '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);
  }
});

EDIT I see, in that case, using one of the 'display:block'/'display:none' options above in conjunction with $(document).ready(...) from jQuery is probably the way to go.编辑我看到，在这种情况下，将上面的'display:block'/'display:none'选项之一与来自 jQuery 的$(document).ready(...)结合使用可能是要走的路。 The $(document).ready() function waits for the entire document structure to be loaded before executing ( but it doesn't wait for all media to load ). $(document).ready()函数在执行之前等待整个文档结构被加载（但它不会等待所有媒体加载）。 You'd do something like this:你会做这样的事情：

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

解决方案7
 2  2016-03-04 16:39:13

Here's the jQuery I ended up using, which monitors all ajax start/stop, so you don't need to add it to each ajax call:这是我最终使用的 jQuery，它监视所有 ajax 启动/停止，因此您无需将其添加到每个 ajax 调用中：

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

CSS for the loading container & content (mostly from mehyaa's answer), as well as a hide class:用于加载容器和内容的 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: HTML：

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

解决方案8
 2  2017-10-17 08:36:12

My blog will work 100 percent.我的博客将 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">

解决方案9
 1  2009-12-05 22:34:45

Create a <div> element that contains your loading message, give the <div> an ID, and then when your content has finished loading, hide the <div> :创建一个包含加载消息的<div>元素，给<div>一个 ID，然后当你的内容加载完成后，隐藏<div> ：

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

...or in plain JavaScript: ...或在纯 JavaScript 中：

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

解决方案10
 1  2020-06-01 00:02:52

This will be in synchronisation with an api call, When the api call is triggered, the loader is shown.这将与 api 调用同步，当 api 调用被触发时，会显示加载器。 When the api call is succesful, the loader is removed.当 api 调用成功时，加载器被移除。 This can be used for either page load or during an api call.这可用于页面加载或 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 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
 1  2020-06-23 09:16:10

for drupal in your theme custom_theme.theme file用于主题 custom_theme.theme 文件中的 drupal

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

In html.html.twig file after skip main content link in body跳过正文中的主要内容链接后，在 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 %}

in css file在 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
 0  2014-06-03 23:14:17

Based on @mehyaa answer, but much shorter:基于@mehyaa 的答案，但要短得多：

HTML (right after <body> ): HTML（紧跟在<body> ）：

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

CSS: 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, since I'm already using it): Javascript（jQuery，因为我已经在使用它了）：

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

解决方案13
 0  2021-06-04 13:06:32

I needed a splash screen, which I implemented by reusing parts of the solutions listed here.我需要一个闪屏，我通过重用这里列出的部分解决方案来实现。 It uses Vanilla JS for full backwards-compatibility.它使用 Vanilla JS 来实现完全的向后兼容性。

Step 1: Add a background with a spinner gif on top of the page, then remove them when everything is loaded.第 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;
}

Step 2: Add a little script right after the opening body tag to start displaying the load/splash screen.第 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在页面加载完成之前显示页面加载html文件？ - How to show Page Loading html file until the page has finished loading? 检查浏览器是否已完成加载页面 - Checking If the Browser Has Finished Loading the Page 如何确保页面已在 React 站点上完成加载 - How to ensure that page has finished loading on a React site 延迟div可见性，直到字体加载完成 - Delay div visibility until font has finished loading AngularJS：如何在页面完全加载之前显示预加载或加载？ - AngularJS: How to show preload or loading until page is loaded completely? 显示加载图标直到页面加载？ - show loading icon until the page is load? 显示LOADING，直到页面完全加载 - show LOADING until page is completely loaded 页面加载完成后刷新ajax页面 - ajax page refresh once loading page has finished 加载 div 页面，该页面显示直到页面完全加载加上两秒钟 - Loading div page that shows until the page has loaded fully PLUS two seconds jQuery - 如何检测页面何时完成加载？ - jQuery - How to detect when page is finished loading?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM