首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：coco2冰冰 | 2023-08-14 11:55
如何解决《如何在页面加载完成之前显示页面加载div》经验，为你挑选了5个好方法。

我在我们的网站上有一个部分加载非常慢,因为它正在进行一些密集的调用.
任何想法我怎么能得到一个div类似于"加载"的东西,当页面准备自己然后在一切准备就绪时消失？



1> 小智..：

我需要这个,经过互联网上的一些研究后我想出了这个(需要jQuery):

首先在body标签后添加:


  Loading...

然后将div和image的样式类添加到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添加到您的页面(最好在页面末尾,然后在关闭标记之前):

然后使用帮助样式类调整加载图像的位置和加载div的背景颜色.

这就是它,工作得很好.但当然你必须有一个ajax-loader.gif地方.

当重定向到另一个页面时,它会保持在同一页面中并突然显示所需的页面,然后:显示前载页面中的加载窗格以及目标页面.window.onbeforeunload = function(){$('#loading').show(); }
加载图像需要一段时间,直到页面加载为止

2> 小智..：

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} 

Loading...


3> Victor Stodd..：

此脚本将添加一个div,在页面加载时覆盖整个屏幕.它将自动显示仅CSS加载微调器.它会等到窗口(不是文档)完成加载,然后它会等待一个可选的额外几秒钟.

适用于jQuery 3(它有一个新的窗口加载事件)

不需要图像,但很容易添加一个

更改延迟以获得更多品牌或说明

只有依赖是jquery.

来自https://projects.lukehaas.me/css-loaders的 CSS加载程序代码

    
$('body').append('
Loading...
');
$(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.

  
    
    
  • Works with jQuery 3, which has a new window load event
    • 
    
  • No image needed but it's easy to add one
    • 
    
  • Change the delay for branding or instructions
    • 
    
  • Only dependency is jQuery.
    • 
  


Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders
























    


    

        

            
            

                
                    devbox
                
            


            

                coco2冰冰            


            

                这个屌丝很懒，什么也没留下！            

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有