jquery仅在向下滑动时加载数据

发布于 2024-10-18 03:48:09 字数 642 浏览 4 评论 0原文

我有一个链接，当用户单击它时，一些数据会加载到 div 中。我想向用户显示等待消息，直到数据从服务器完全获取，然后将其显示给用户。

我还想调用数据 url 仅在结果框向下（向下滑动）时发生，而不是在向下滑动和向上滑动事件中发生，以减少服务器上的负载。

我的代码在这里，但我不知道如何实现第二部分：

$(document).ready(function() {
        $("#prereq").hide();
        $("#prereqlink").click(function() {
             $("#prereq").html("please wait ...");
             $("#prereq").slideToggle("slow");

             $.ajax({ url:"referee.php",
                      success:function(data) {
                              $("#prereq").html(data);
                    }
             });

        });
 });

你能帮助我吗？

原文

I have a link that when user clicks on it some data loaded into a div. I want to display waiting message to user until the data fetch completely from server and then show it to user.

I also want to call the data url happen only when the result box is going down(slide down) not in both of slide down and slide up events to reduce load on server.

my code is here but i don't know how implement second part into it:

$(document).ready(function() {
        $("#prereq").hide();
        $("#prereqlink").click(function() {
             $("#prereq").html("please wait ...");
             $("#prereq").slideToggle("slow");

             $.ajax({ url:"referee.php",
                      success:function(data) {
                              $("#prereq").html(data);
                    }
             });

        });
 });

would you help me??

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁把谁当真 2024-10-25 03:48:09

尝试这样的事情，但请注意，我不太确定

var mode = 'down';

$(document).ready(function() {
    $("#prereq").hide();
    $("#prereqlink").click(function() {
         $("#prereq").html("please wait ...");
         $("#prereq").slideToggle("slow");
    if(mode == 'down'){
         $.ajax({ url:"referee.php",
                  success:function(data) {
                        mode = 'up';
                          $("#prereq").html(data);
                }
         });
    }
    else{
        mode = 'down';
    }

    });
});

try something like this but please note that I am not so sure

var mode = 'down';

$(document).ready(function() {
    $("#prereq").hide();
    $("#prereqlink").click(function() {
         $("#prereq").html("please wait ...");
         $("#prereq").slideToggle("slow");
    if(mode == 'down'){
         $.ajax({ url:"referee.php",
                  success:function(data) {
                        mode = 'up';
                          $("#prereq").html(data);
                }
         });
    }
    else{
        mode = 'down';
    }

    });
});

回复收藏 0 原文

勿挽旧人 2024-10-25 03:48:09

我找到了一种方法。通过使用 $("#prereq").is(":visible") 我们可以检查它。

回复收藏 0 原文

天生の放荡 2024-10-25 03:48:09

    $(document).ready(function() {
    $("#prereq").hide();
    /* OR to add class to initialize as required 
     $("#prereq").addClass(("downMode").hide(); 
    */
    $("#prereqlink").click(function() {
         $("#prereq").slideToggle("slow", function(){
             $.ajax({ url:"referee.php",
                  beforeSend: function() {
                   if ($("#prereq").hasClass("downMode")){
                     $("#prereq").html("please wait ...").show();   
                     return true;
                   }
                   /* cancel ajax request */
                   return false ;   
                  },
                  success:function(data) {
                   $("#prereq").html(data);
                  }
             });
        }).toggleClass("downMode");
    });
 });

编辑：
我认为我们可以删除 beforeSend 并在 slipToggle 回调中的 $.ajax(...) 之前检查类
if ($(this).is('.downMode')){ $.ajax(....

    $(document).ready(function() {
    $("#prereq").hide();
    /* OR to add class to initialize as required 
     $("#prereq").addClass(("downMode").hide(); 
    */
    $("#prereqlink").click(function() {
         $("#prereq").slideToggle("slow", function(){
             $.ajax({ url:"referee.php",
                  beforeSend: function() {
                   if ($("#prereq").hasClass("downMode")){
                     $("#prereq").html("please wait ...").show();   
                     return true;
                   }
                   /* cancel ajax request */
                   return false ;   
                  },
                  success:function(data) {
                   $("#prereq").html(data);
                  }
             });
        }).toggleClass("downMode");
    });
 });

Edit:
I think we can remove beforeSend and check for class before the $.ajax(...) in slideToggle callback as
if ($(this).is('.downMode')){ $.ajax(....

回复收藏 0 原文

~没有更多了~