Question

我有以下Jquery，在点击Checkbox时，重新加载一个DIV，传递该框的值并根据查询显示新项目。

我希望在加载DIV的内容之前有3秒左右的“加载”栏，之后逐渐淡出。然后以淡入效果加载DIV。我尝试过一些东西，但没有用。

这是我的代码。

谢谢！

jQuery(document).ready(function($) {
    $("input:checkbox").change(function() {
        if ($(this).is(':checked')) 
        {
            $(".loadingItems").delay(3000).fadeOut(3000);
            var color = [];
            color.push($(this).val());
            $(".indexMain").load('indexMain.php?color='+color);
        }
        else if ($(this).not(':checked')) 
        {
            $(".indexMain").load('indexMain.php');
        }
    });
});

Answer 1

让您的用户等待三秒钟通常被认为是不好的做法，这样您就可以炫耀您的加载栏，当它消失时，已经过了六秒钟，而您的用户已经离开了。在ajax调用完成并且内容准备就绪后，删除加载栏。另外，你确定你应该在查询字符串中使用数组吗？

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        if (this.checked) {
            var color = [];
            color.push(this.value); //array in querystring ?
            $(".indexMain").load('indexMain.php?color='+color, function() {
                $(".loadingItems").fadeOut(300); //remove when load is complete
            });
        }else{
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);  //remove when load is complete
            });
        }
    });
});

我会猜测并说这就是你所追求的：

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        var qs = this.checked ? 'color='+this.value : '';
        $(".indexMain").load('indexMain.php'+qs, function() {
            $(".loadingItems").fadeOut(300); //remove when load is complete
        });
    });
});

Answer 2

简单的setTimeout()函数可以延迟执行命令。

$("#loader").fadeIn();
setTimeout(function(){
  $("#loader").fadeOut();  
  $(".indexMain").load('indexMain.php?color='+color);
  ...
},3000);

延迟被指定为setTimeout函数中的第二个参数。在这个例子中，我放置了3000。这个数字以毫秒为单位; 1秒= 1000毫秒。

参考 -

setTimeout()

Answer 3

我认为您正在寻找一个jQuery预加载器？

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Answer 4

您可以使用fadeOut方法的回调函数：

.fadeOut（[duration] [，easing] [，callback]） callback：动画完成后调用的函数。

var color = [];
color.push($(this).val());
$(".loadingItems").delay(2700).fadeOut(300, function(){
    $(".indexMain").load('indexMain.php?color='+color);
});

Answer 5

这是一个简单的函数，您可以在将内容加载到div中时使用

function loadIntoDiv(div,url){
    $("#loader").fadeIn();
    $(div).load(url,function(){
        $("#loader").fadeOut();
    });
}

示例：loadIntoDiv(".indexMain",'indexMain.php');

在显示之前在div中加载栏

5 个答案: