jQuery

Question

在bootstrap页面上，当我们做一些耗时的工作时，我们通常需要一个旋转的GIF来表示正在进行中，并阻止操作part/changing UI组件。

我知道 jQuery 有一个名为 jQuery BlockUI 的插件用于此特定任务，但我在问自己是否可以在没有它的情况下完成它，因为为一个简单的任务引入一个插件似乎是矫枉过正。

我们可以吗？

Answer 1

对于像我这样的 "lesser-dependency-better" 程序员，我不会拒绝结识比我在某件事上做得更好的新朋友；但是，这个简单的任务似乎完全是对我的 JavaScript 技能的有效考验，因为它相对容易。所以，我花了一个小时尝试，我得到的是：

因此，只有 jQuery、JavaScript 和 Bootstrap 才有可能 3.

当我按下按钮时，我的代码会向 table 添加一个阻塞模态，执行 ajax 调用，等待 0.5 秒，然后解除阻塞，以显示旋转的 gif（因为它可能太快引起注意）。感谢 another question, I found https://icons8.com/preloaders/ 中的@NaveedButt 使用我网站的主题颜色生成自定义 gif。

Throbber 模态：（gif 水平和垂直居中）

<div id="throbber" class="modal" role="dialog" style="display:none; position:relative; opacity:0.6; background-color:white;">
    <img style="margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;" src="/static/images/spinning.gif" />
</div>

按钮：

<div class="row">
    <div class="col-lg-12">
        <div class="pull-right">
            <button type="button" id="reload" class="btn btn-primary pull-right-button" style="width: 120px;">Reload</button>
        </div>
    </div>
</div>

JavaScript + jQuery:

function block() {
    var body = $('#panel-body');
    var w = body.css("width");
    var h = body.css("height");
    var trb = $('#throbber');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: 'absolute',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $('#throbber');
    trb.hide();
}
$(document).ready(function(){
    $('#reload').click(function(){
        block();
        $.ajax({
            type:       "GET",
            url:        "{% url 'scriptsList'%}",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});

Answer 2

是的，你需要的是 div 和 CSS class 你将在有服务器调用时显示此 div 并在调用时隐藏它完成。

function blockPage() {
  $('#divBlock').show();
  setTimeout(function() {
    $('#divBlock').hide();
  }, 3000);
}

.block {
  background: rgba(0, 0, 0, .3) url('https://thumbs.gfycat.com/LameDifferentBalloonfish-max-1mb.gif') no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divBlock" class="block" style="display: none;"></div>
<button type="button" onclick="blockPage()">Block for Loading!</button>

jQuery - 带有旋转 gif 的阻塞模态，没有 jQuery 阻塞 UI

jQuery - Blocking modal with spinning gif, without jQuery Block UI

javascript

jquery-blockui