JavaScript，Laravel如何在获得响应之前添加预加载或加载动画？
JavaScript，Laravel如何在获得响应之前添加预加载或加载动画？
提问于 2018-08-08 04:08:26
下面是从shopping car中删除的代码。
它运行良好，但需要一些时间来响应删除。当然不到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>回答 2
Stack Overflow用户
发布于 2018-08-08 12:26:36
可以这样做：
$('#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>我还删除了一个变量，你设置了两次，并整理了你的代码。
Stack Overflow用户
发布于 2018-08-08 13:14:34
创建一个加载动画的元素，并将其显示属性为‘None’。然后，当你单击某项内容时，显示加载动画，当请求完成时，隐藏加载动画。下面是一些伪代码：
<script>
$(function() {
$(document).on('click', '.remove_item', function(e) {
...
$("#loadingAnimationId").show()
...
$.ajax({
type: 'DELETE',
url: "cart/" + id,
...
success: function(data) {
...
$("#loadingAnimationId").hide()
...
}
});
});
});
</script>另外，考虑请求失败的情况，你也需要停止动画。否则，它只会继续下去，而用户永远不知道有问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002015
复制相关文章
相似问题