时间戳

首页 > 解决方案 > 页面中的加载栏

javascript - 页面中的加载栏

问题描述

我想实现一个页面，其中在一个页面中，一半的数据会立即加载，但是对于一列，我有时必须等待获得响应并且一旦响应到来。我必须显示该列中的内容。一切都对我有用，我还添加了 loader.gif，因为用户不会认为他们没有得到任何响应。

我面临的问题是，它对整个页面使用加载 gif，而不是仅显示加载内容。我希望 loader.gif 应该显示在底部的某个地方，那里有取消按钮，直到一列得到响应，其余的字段应该立即出现。

我用过：

身体的一部分 -

<div class="se-pre-con"></div>

CSS -

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(resources/images/loading.gif) center no-repeat #fff;
}

javascript -

$(".se-pre-con").fadeOut("slow");

标签： javascriptjavahtmlcss

解决方案

看来你是新来的css。我jQuery为你制作函数；）

$(function(){
	$('.box').click(function(){
  	$(this).loaderToggle();
  });
});

// code u need

jQuery.fn.loaderOn = function(...args){
	this.loaderInstall().find('.se-pre-con').fadeIn(...args);
    
  return this;
}
jQuery.fn.loaderOff = function(...args){
	this.find('.se-pre-con').fadeOut(...args);
  
  return this;
}
jQuery.fn.loaderToggle = function(...args){
	this.loaderInstall().find('.se-pre-con').fadeToggle(...args);
  
  return this;
}
jQuery.fn.loaderInstall = function(){
	if(!this.loaderInstalled()) {
  	this.append($('<div class="se-pre-con"></div>').hide());
  }
  
  return this;
}
jQuery.fn.loaderDestroy = function(){
	this.removeClass('loader-container').find('.se-pre-con').remove();
  
  return this;
}
jQuery.fn.loaderInstalled = function(){
	this.addClass('loader-container');
	
  return !!this.find('.se-pre-con').length;
}
/* 
code you need
*/

.loader-container {
  position: relative;
}

.se-pre-con {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://mir-s3-cdn-cf.behance.net/project_modules/disp/09b24e31234507.564a1d23c07b4.gif) center no-repeat #fff;
  background-size: contain;
  z-index: 9999;
}


/* 
just for grid
*/

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 100px 100px 100px;
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .b {
        grid-column: 3 ;
        grid-row: 1 / 3;
    }
    .c {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .d {
        grid-column: 2;
        grid-row: 2;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

推荐阅读