Question

在引导页面上，当我们执行一些耗时的任务时，我们通常需要旋转GIF来指示进程正在进行，并阻止操作部分/更改UI组件。

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

我们可以吗？

Answer 1

是的，你需要的是一个带有CSS类的div，你会在有服务器调用时显示这个div，并在完成这个调用后隐藏它。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

对于像我这样的“依赖程度较低”的程序员，我不会拒绝引进能比我自己做得更好的新朋友;但是，这个简单的任务似乎完全是我的JavaScript技能的有效试验，因为它相对容易。所以，我花了一个小时尝试，而我得到的是：

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

当我按下按钮时，我的代码会向表格添加一个阻塞模式，执行ajax调用，然后等待0.5秒，然后取消阻止，以显示旋转的gif（因为它可能太快注意到）。感谢another question中的@NaveedButt，我发现https://icons8.com/preloaders/生成了一个带有我网站主题颜色的自定义gif。

悸动模态:( 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

    });
});

jQuery - 使用旋转gif阻塞模态，没有jQuery Block UI

2 个答案: