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

javascript dom jquery html loader

2022-08-30 01:27:20

我在我们的网站上有一个部分，加载速度很慢，因为它正在做一些密集的电话。

任何想法，我怎么能得到一个类似于“加载”的东西来显示，而页面准备自己，然后在一切准备就绪时消失？div

答案 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添加到您的页面（最好是在页面末尾，当然是在结束标记之前）：</body>

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

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

就是这样，应该工作得很好。但是，当然，您应该在某个地方使用base64 url作为图像的值。免费赠品在这里。（右键单击>图像另存为...）ajax-loader.gifsrc

更新

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

答案 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>