Jquery：加载一个 HTML 页面，然后通过 AJAX 加载另一个 html 页面

发布于 2024-09-27 12:07:14 字数 708 浏览 4 评论 0原文

  //when document loads
   $(document).ready(function() {

    //navigation item is clicked
     $('.nav_item').click(function() {

    //get the clicked nav items id
    var nav_item = $(this).attr("id");
    var location_to_load = nav_item + '.html';

   //load the loading html then the page
   $('#sliding_content_container').load('loading.html', null, showResponse);

   //load the page
   function showResponse(){
    $('#sliding_content_container').delay(900).load(location_to_load);
   };

   //dont refresh
   return false;
   }); 
   });

嘿，我正在学习 Jquery，只是想知道为什么我不能调用“加载页面”，然后延迟调用目的地，似乎我尝试的一切都不起作用，例如添加 .delay 或链接函数。

任何帮助都会很棒，我正在给 jquery 一个很好的老破解。

谢谢

原文

  //when document loads
   $(document).ready(function() {

    //navigation item is clicked
     $('.nav_item').click(function() {

    //get the clicked nav items id
    var nav_item = $(this).attr("id");
    var location_to_load = nav_item + '.html';

   //load the loading html then the page
   $('#sliding_content_container').load('loading.html', null, showResponse);

   //load the page
   function showResponse(){
    $('#sliding_content_container').delay(900).load(location_to_load);
   };

   //dont refresh
   return false;
   }); 
   });

Hey, I'm learning Jquery and just wondered why I can't call a "loading page" and then the destination with a delay, it seems everything I try doesn't work for instance adding .delay on or chaining the functions..

any help will be great, I'm giving jquery a good old crack.

thanks

分享到QQ

分享到微博

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

发布评论

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

吃→可爱长大的 2024-10-04 12:07:14

delay 方法用于动画。
它将一个延迟项目添加到动画队列中，延迟在其之后调用的任何动画。
不会影响正常方法。

相反，您应该调用 setTimeout 函数，例如这：

$('#sliding_content_container').load('loading.html', null, function() {
    setTimeout(function() { 
        $('#sliding_content_container').load(location_to_load);
    }, 900);
});

The delay method is used for animations.
It adds a delay item to the animation queue, delaying any animations called after it.
It will not affect normal methods.

Instead, you should call the setTimeout function, like this:

$('#sliding_content_container').load('loading.html', null, function() {
    setTimeout(function() { 
        $('#sliding_content_container').load(location_to_load);
    }, 900);
});

回复收藏 0 原文

踏月而来 2024-10-04 12:07:14

为了使延迟发挥作用，您需要使用队列来加载 showResponse() 中的下一次调用。

function showResponse(){
    $('#sliding_content_container')
      .delay(900)
      .queue(
        function()
        {
          var $this = $(this);
          $this
            .load(
              location_to_load,
              false,
              function()
              {
                $this.dequeue();
              }
            );
        }
      );
};

如果您愿意，您还可以使用“fx”以外的队列，以防您因为该队列通常用于动画而感到烦恼。

For delay to work, you need to use the queue for your next call to load in showResponse().

function showResponse(){
    $('#sliding_content_container')
      .delay(900)
      .queue(
        function()
        {
          var $this = $(this);
          $this
            .load(
              location_to_load,
              false,
              function()
              {
                $this.dequeue();
              }
            );
        }
      );
};

If you want to, you can also use a queue other than 'fx', in case it bugs you that this queue is usually used for animations.

回复收藏 0 原文