ajax loader gif setinterval

Question

我试图显示加载图像3秒然后加载ajax数据。所以iv尝试添加这是前功能，但它不工作，它加载速度快，我需要它，所以加载器图像将显示3秒

这是我的js

$.ajax({
        url: "ajax/change_skin.php",
        type: "GET",
        data: {skin:skin},
        before:function(){
            setInterval(function(){
                $('#loader').show();
            }, 3000);
        },
        complete:function(){
            $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });

Answer 1

在执行ajax调用之前显示加载程序。

$("#loader").show();

setTimeout(function() {
    $.ajax({
        url: "ajax/change_skin.php",
        type: "GET",
        data: {skin:skin},
        complete:function(){
            $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });
}, 3000);

---

编辑：在实际进行ajax调用之前，我会避免让用户等待任何时间来查看您的微调器/加载器动画。

制造旋转器用于表示实际装载和处理。在这种情况下，您可以虚假地表示处理请求的速度并将慢速投射到用户身上。

你应该这样做的方式是：

$("#loader").show();

$.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
    complete:function(){
        $('#loader').hide();
    },
    success:function(data){
        console.log(date);
    }
});

Answer 2

如果您不想为加载添加不必要的3秒延迟（仅限于微调器），请使用ajax延迟结果：

// Show the spinner
$("#loader").show();

// Do the ajax load
var deferred = $.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
    success:function(data){
        console.log(date);
    }
});

// Hide after 3 seconds... and then only if/when ajax completes
setTimeout(function() {
    deferred.then(function(){
       $('#loader').hide();
    });
}, 3000);

Answer 3

你做错了。你应该这样做：

$('#loader').show();
setInterval(function(){
    $.ajax({
    url: "ajax/change_skin.php",
    type: "GET",
    data: {skin:skin},
        complete:function(){
           $('#loader').hide();
        },
        success:function(data){
            console.log(date);
        }
    });
}, 3000);

SetInterval将使每个代码在指定的间隔之后运行。