//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
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);
});
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.
It's normal, that you cannot delay it with .delay(); AJAX is asynchronous by default (sometimes it helps to check what abbreviation of technology means). It's quite a lot of time since I used jQuery, but as far as i remember .ajax request should be suitable. http://api.jquery.com/jQuery.ajax/
精彩评论