Why is jQuery .load() firing twice?
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+'开发者_StackOverflow社区/').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 notwindow.location=addr;
- I'm achieving the above with
- Feel free to visit my site if needed.
Thanks in advance.
I think you've answered your own question:
"I'm redirecting
/links-like/this
to/#links-like/this
via JavaScript only (PE)"
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.
精彩评论