I'm trying to get an AJAX website with the jquery.address plugin
if you take a look at http://www.idbranding.nl the deep-linking works fine.
The only problem is i can't achieve a loading screen simular like: http://www.nerisson.fr/ (also uses the jquery.address plugin)
So my question is, does anybody knows how to animate the content (FadeOut/FadeIn) and show/hide a loading screen? I think it ain't hard but the documention of jquery.address is limited when it comes to animation.
Here's my code:
function loadURL(url) {
console.log("loadURL: " + url);
$("#content").load(url);
}
// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$("#content").load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
$('a').click(function(){
loadURL($(this).attr('href'));
});
maybe something like this as the load function:
$("#content").fadeOut("fast", function() { //block of code to be executed when page is faded out
$("#loadingPlaceholder").fadeIn("fast"); // fade in placeholder (e.g. loading image)
$.get(url, function(data){ // get the data and if data has been loaded...
$("#loadingPlaceholder").fadeOut("fast"); // fade out placeholder
$("#content").empty().html(data).fadeIn("fast"); // empty the innerHTML (--> prevents "flickering"), insert the loaded data and fade in again
});
});
furthermore I wouldn't use the click()
function, as you would have to apply it to any new links (that may be loaded) --> use delegate/on (don't know which jQuery version you're using) instead ;)
For a more detailed example check my version https://github.com/peter-m/blueprint/blob/master/js/pushState.js