Page

Question

我想实现一个页面，其中在单个页面中，一半的数据立即被加载，但是对于一列，我有时必须等待获取响应，并且一旦响应到来。我必须在该列中显示内容。一切都对我有用，我添加了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");

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>