頁面中的加載欄

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>