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

Question

我在我们的网站上有一个版块，在进行一些密集的通话时，加载速度很慢。知道如何让div说出类似于“正在加载”的内容，以便在页面进行自我准备时显示，然后在一切准备就绪时消失吗？

Answer 1

我需要这个，经过一番研究，我想出了这个（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>

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

就是这样，应该可以正常工作。但是，当然，您必须在某处放置ajax-loader.gif。赠品here。（右键单击>将图像另存为...）

Answer 2

基于@mehyaa的答案，但简短得多：

HTML（在<div id="loading" class="hide"> <div id="loading-content"> Loading... </div> </div>之后）：

<body>

CSS：

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

Javascript（jQuery，因为我已经在使用它：）：

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

Answer 3

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

与jQuery 3配合使用（它具有新的窗口加载事件）
不需要图像，但是很容易添加一个
更改延迟以获取更多品牌或说明
仅依赖是jQuery。

[C0中的CSS加载器代码

https://projects.lukehaas.me/css-loaders

    
$('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;
        }

Answer 4

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>

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}

使用JS创建的具有最简单的<div id="loading"> <img id="loading-image" src="img/loading.gif" alt="Loading..." /> </div>效果的页面加载图像：

Answer 5

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

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

fadeout

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

.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 id="coverScreen"  class="LockOn">
</div>

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

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

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

这意味着当我们单击此打印按钮（这将花费很长的时间来提交报告）时，它将显示带有GIF的封面屏幕，该屏幕会显示$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () { $("#coverScreen").show(); });结果，一旦页面准备好，加载功能的窗口上方将触发并屏幕完全加载后，它将隐藏封面。

Answer 6

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

Answer 7

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

display:none

编辑我看到，在那种情况下，将上面的$.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); } });选项之一与jQuery中的'display:block'/'display:none'结合使用可能是可行的方法。 $(document).ready(...)函数在执行之前等待整个文档结构被加载（但它不等待所有媒体加载）。你会做这样的事情：

$(document).ready()

Answer 8

我的博客将100％有效。

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

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

Answer 9

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

<div>

...或普通JavaScript：

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

Answer 10

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

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

用于加载容器和内容的CSS（主要来自mehyaa的答案），以及$(document).ajaxStart(function(){ $("#loading").removeClass('hide'); }).ajaxStop(function(){ $("#loading").addClass('hide'); });类：

hide

HTML：

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

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

问题描述投票：133回答：10

10个回答

最新问题

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

问题描述 投票：133回答：10

10个回答

最新问题

问题描述投票：133回答：10