为什么 jQuery .load() 会触发两次?

发布于 2024-08-24 19:32:47 字数 2310 浏览 6 评论 0原文

我正在将 jQuery 1.4 与 jQuery History 一起使用,并试图找出为什么 Firebug/Web Inspector 在每个页面加载时显示 2 个 XHR GET 请求(访问我的网站主页时,该数量加倍(/>/#)。

并启用 Firebug。

例如,访问 (或任何)页面, 相关代码(参见完整来源): -

$(document).ready(function() {

    $('body').delegate('a', 'click', function(e) {
        var hash = this.href; 
        if (hash.indexOf(window.location.hostname) > 0) { /* Internal */
         hash = hash.substr((window.location.protocol+'//'+window.location.host+'/').length); 
         $.historyLoad(hash); return false;     
  } else if (hash.indexOf(window.location.hostname) == -1) { /* External */ 
   window.open(hash); return false; 
  } else { /* Nothing to do */ }
        });


 $.historyInit(function(hash) {
  $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); 
   $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { 
    $('#page').empty(); $('#loading').fadeIn('fast');

    if (hash == '') { /* Index */ 
     $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); 
    } else {
        $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) {
      switch (XMLHttpRequest.status) { 
       case 200: ajaxLoad(); break;
       case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404
       default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break;
       }
      });
     }

}); // $('#ajax')
  }); // historyInit()


  function ajaxLoad() {
   $('#loading').fadeOut('fast', function() { 
    $(this).remove(); $('#ajax').animate({height: 'show', opacity: '1'}, 'fast', 'swing');
    });
   }

    });

一些可能有用的注释: -

  • 使用 WordPress 和默认/标准 .htaccess
  • 我将 /links-like/this 重定向到 /#links- like/this 仅通过 JavaScript (PE)
    • 我通过 window.location.replace(addr); 而不是 window.location=addr; 实现上述目标
  • 请随意访问 我的网站(如果需要)。

提前致谢。

I'm using jQuery 1.4 with jQuery History and trying to figure out why Firebug/Web Inspector are showing 2 XHR GET requests on each page load (double that amount when visiting my sites homepage (/ or /#).

e.g. Visit this (or any) page with Firebug enabled.

Here's the edited/relevant code (see full source): -

$(document).ready(function() {

    $('body').delegate('a', 'click', function(e) {
        var hash = this.href; 
        if (hash.indexOf(window.location.hostname) > 0) { /* Internal */
         hash = hash.substr((window.location.protocol+'//'+window.location.host+'/').length); 
         $.historyLoad(hash); return false;     
  } else if (hash.indexOf(window.location.hostname) == -1) { /* External */ 
   window.open(hash); return false; 
  } else { /* Nothing to do */ }
        });


 $.historyInit(function(hash) {
  $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); 
   $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { 
    $('#page').empty(); $('#loading').fadeIn('fast');

    if (hash == '') { /* Index */ 
     $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); 
    } else {
        $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) {
      switch (XMLHttpRequest.status) { 
       case 200: ajaxLoad(); break;
       case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404
       default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break;
       }
      });
     }

}); // $('#ajax')
  }); // historyInit()


  function ajaxLoad() {
   $('#loading').fadeOut('fast', function() { 
    $(this).remove(); $('#ajax').animate({height: 'show', opacity: '1'}, 'fast', 'swing');
    });
   }

    });

A few notes that may be helpful: -

  • Using WordPress with default/standard .htaccess
  • I'm redirecting /links-like/this to /#links-like/this via JavaScript only (PE)
    • I'm achieving the above with window.location.replace(addr); and not window.location=addr;
  • Feel free to visit my site if needed.

Thanks in advance.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

明月夜 2024-08-31 19:32:47

我认为您已经回答了自己的问题:

“我仅通过 JavaScript (PE) 将 /links-like/this 重定向到 /#links-like/this

I think you've answered your own question:

"I'm redirecting /links-like/this to /#links-like/this via JavaScript only (PE)"

2024-08-31 19:32:47

我最初在上面发布的代码示例可能有助于回答我自己的问题...

在我的实时网站上,.load() 嵌套在 2 层回调中: -

$.historyInit(function(hash) {
    $('html, body').animate({scrollTop: '0'}, 500, 'swing', function() { \\ level 1
        $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); 
        $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { \\ level 2
            $('#page').empty(); $('#loading').fadeIn('fast');

            if (hash == '') { /* Index */ 
                $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); 
            } else {
                $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) {
                    switch (XMLHttpRequest.status) { 
                        case 200: ajaxLoad(); break;
                        case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404
                        default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break;
                        }
                    });
                }

            }); // $('#ajax')
        }); // $('html, body')
    }); // historyInit()

...移动 if (hash) 回调之外的语句使所有页面的 1 XHR GET 降到最低(/ 是唯一的例外)。

再次感谢您尝试帮助保罗。

The code example I originally posted above may have helped towards answering my own question...

On my live site .load() was nested within 2 levels of callbacks: -

$.historyInit(function(hash) {
    $('html, body').animate({scrollTop: '0'}, 500, 'swing', function() { \\ level 1
        $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); 
        $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { \\ level 2
            $('#page').empty(); $('#loading').fadeIn('fast');

            if (hash == '') { /* Index */ 
                $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); 
            } else {
                $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) {
                    switch (XMLHttpRequest.status) { 
                        case 200: ajaxLoad(); break;
                        case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404
                        default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break;
                        }
                    });
                }

            }); // $('#ajax')
        }); // $('html, body')
    }); // historyInit()

...moving the if (hash) statement outside callbacks brings me back down to 1 XHR GET for all pages (with / as the only exception).

Thanks again for trying to help Paulo.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文