Question

我下面有此代码可从购物车中删除。

工作正常，但是删除响应需要一段时间-肯定不到1秒，但是在此期间，我需要显示预加载动画

<script>
 $(function() {
     $(document).on('click', '.remove_item', function(e) {
         e.preventDefault();
         $(this).attr('disabled', 'disabled');
         var id = $(this).data('id');
         var id = $(this).data('id');
         var productprice = parseFloat($(this).data('price'));
         var productqty = $(this).data('qty');
         $cart_ptotal = parseFloat($('#cart_ptotal').text().replace(',', ''));
         $.ajax({
             type: 'DELETE',
             url: "cart/" + id,
             data: {
                 '_token': $('input[name=_token]').val()
             },
             success: function(data) {
                 $('#cart_total').text(Number($('#cart_total').text()) - Number(productqty));
                 $('#cart_ptotal').text((($cart_ptotal) - productprice).toFixed(2));
                 $('.remove_item').removeAttr('disabled');
                 if (($('#cart_total').text()) == 0) {
                     $('.remove_item').attr('disabled', 'disabled');
                     $("#emptycart").css('display', 'block');
                     $("#cartproduct").css('display', 'none');
                 }

                 $('#cart_product').html(data);
             }
         });
     });
 });
</script>

Answer 1

创建一些正在加载动画的元素，并将其display属性设置为“ none”。然后，当您单击某些内容时，显示加载动画，当请求完成时，隐藏加载动画。这是一些伪代码：

<script>
 $(function() {
     $(document).on('click', '.remove_item', function(e) {
         ...
         $("#loadingAnimationId").show()
         ...
         $.ajax({
             type: 'DELETE',
             url: "cart/" + id,
             ...
             success: function(data) {
                 ...
                 $("#loadingAnimationId").hide()
                 ...
             }
         });
     });
 });
</script>

还要考虑请求失败的情况，您也想在那里停止动画。否则，它将一直持续运行，而用户不会知道有问题。

Answer 2

您可以执行以下操作：

$('#loading-animation').show();

// make ajax happen

$('#loading-animation').hide();

在示例代码中，您将这样使用：

 <script>
 $(function(){ 
     $(document).on('click','.remove_item', function (e) { 
         e.preventDefault(); 
         $(this).attr('disabled','disabled');
         var id = $(this).data('id'); 
         var productprice = parseFloat($(this).data('price')); 
         var productqty = $(this).data('qty'); 
         $cart_ptotal =parseFloat($('#cart_ptotal').text().replace(',', ''));

         //show loader
         $('#loading-animation').show();

         $.ajax({
             type: 'DELETE',
             url: "cart/"+ id,  
             data: {'_token': $('input[name=_token]').val()},
             success: function (data) {
                 $('#cart_total').text(Number($('#cart_total').text())-Number(productqty));
                 $('#cart_ptotal').text((($cart_ptotal)-productprice).toFixed(2));
                 $('.remove_item').removeAttr('disabled');
                 if(($('#cart_total').text())==0){
                     $('.remove_item').attr('disabled','disabled');
                     $("#emptycart").css('display','block');
                     $("#cartproduct").css('display','none');
                 }

                 $('#cart_product').html(data);

                 //hide loader
                 $('#loading-animation').hide();        
             }               
         });
     });
 });
 </script>

我还删除了您两次设置的变量，并整理了代码。干净的代码就是快乐的代码。

Javascript，Laravel如何在获得响应之前添加预加载或任何加载动画

2 个答案: