javascript - 页面中的加载栏

Question

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

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

我用过:

body 部分 -

<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");

Answer 1

看来您是 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>