#jquery #ajax #navigation #transition
#jquery #ajax #навигация #переход
Вопрос:
страница, над которой я работаю, находится в режиме реального времени по адресу https://www.visaprosolutions.com
он использует jquery и ajax для перехода между страницами. Код работает нормально, за исключением того, что если вы очень быстро просматриваете страницы или очень быстро нажимаете кнопку возврата в историю, страница прерывается. Я опубликую код для навигации ниже (window.popstate выполняет тот же код, за исключением pushstate)
// -----------------navigation click--------------------
// ----------Home---------
$('nav > a:nth-of-type(1)').on('click', function (event){
window.history.pushState('home', '', '/');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/home.css");
}, 400);
if ( $('body').hasClass('pagegrid') ){
$('body').removeClass('pagegrid');
$('body').addClass('homegrid');
$('index.php .subbox').insertAfter('.main_content');
}
$('.subbox').remove();
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(1) > p:first-of-type').addClass('pageonodd');
$('.active_bg').after('<img src="Assets/background1.png" class="loader_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('index.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
$.when($('body').append('<div id="subbox_loader"></div>')).done(function() {
$('#subbox_loader').load('index.php .subbox', function() {
$('.subbox').unwrap();
$.getScript('/JS/home.js');
});
});
});
});
});
});
// -----homebtn click on headerlogo click----
$('#headerlogo').on('click', function(event) {
event.preventDefault();
$('nav > a:nth-of-type(1)').click();
});
// ----------VisaTypes---------
$('nav > a:nth-of-type(2)').on('click', function (event){
window.history.pushState('visatypes', '', 'visatypes');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/visatypes.css");
}, 400);
if ( $('body').hasClass('homegrid') ){
$('body').removeClass('homegrid');
$('body').addClass('pagegrid');
$('.subbox').remove();
}
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(2) > p:first-of-type').addClass('pageoneven');
$('.active_bg').after('<img src="Assets/background2.png" class="loader_bg fixed_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('visatypes.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
});
});
});
});
// ----------Process---------
$('nav > a:nth-of-type(3)').on('click', function (event){
window.history.pushState('process', '', 'process');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/process.css");
}, 400);
if ( $('body').hasClass('homegrid') ){
$('body').removeClass('homegrid');
$('body').addClass('pagegrid');
$('.subbox').remove();
}
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(3) > p:first-of-type').addClass('pageonodd')
$('.active_bg').after('<img src="Assets/background3.png" class="loader_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('process.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
$.getScript('/JS/process.js');
});
});
});
});
// ----------About---------
$('nav > a:nth-of-type(4)').on('click', function (event){
window.history.pushState('about', '', 'about');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/about.css");
}, 400);
if ( $('body').hasClass('homegrid') ){
$('body').removeClass('homegrid');
$('body').addClass('pagegrid');
$('.subbox').remove();
}
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(4) > p:first-of-type').addClass('pageoneven')
$('.active_bg').after('<img src="Assets/background4.png" class="loader_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('about.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
$.getScript('/JS/about.js');
});
});
});
});
// ----------Contact---------
$('nav > a:nth-of-type(5)').on('click', function (event){
window.history.pushState('contact', '', 'contact');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/contact.css");
}, 400);
if ( $('body').hasClass('homegrid') ){
$('body').removeClass('homegrid');
$('body').addClass('pagegrid');
$('.subbox').remove();
}
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(5) > p:first-of-type').addClass('pageonodd')
$('.active_bg').after('<img src="Assets/background5.png" class="loader_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('contact.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
$.getScript('/JS/contact.js');
});
});
});
});
// ----------Get Started---------
$('nav > a:nth-of-type(6)').on('click', function (event){
window.history.pushState('getstarted', '', 'getstarted');
$('.main_content > *').removeClass('riseup').addClass('sinkdown');
setTimeout(function(){
$(".page_css").attr("href", "/CSS/getstarted.css");
}, 400);
if ( $('body').hasClass('homegrid') ){
$('body').removeClass('homegrid');
$('body').addClass('pagegrid');
$('.subbox').remove();
}
$('.navilist').removeClass('pageonodd pageoneven');
$('nav > a:nth-of-type(6) > p:first-of-type').addClass('pageoneven')
$('.active_bg').after('<img src="Assets/background6.png" class="loader_bg fixed_bg">');
$('.loader_bg').on('load', function() {
$('.active_bg').animate({opacity: '0'}, 300, function(){
$('.active_bg').remove();
$('.loader_bg').addClass('active_bg').removeClass('loader_bg');
$('.main_content').load('getstarted.php .main_content > *', function(){
$('.main_content > *').addClass('riseup');
$.getScript('/JS/getstarted.js');
});
});
});
если у кого-нибудь есть какие-либо идеи о том, как добавить идентификатор исправления, действительно ценю это!
Ответ №1:
setTimeout(function(){
$(".page_css").attr("href", "/CSS/home.css");
}, 400);`enter code here`
постарайтесь переждать этот тайм-аут, потому что ваша страница отстает и не может правильно загрузить CSS
$(".page_css").attr("href", "/CSS/home.css");
Комментарии:
1. спасибо за ответ; причина отключения настройки в том, что эта строка кода $ (‘.main_content > *’).removeClass(‘riseup’).addClass(‘sinkdown’); для завершения анимации «sinkdown» требуется 400 мс, и оба элемента будут иметь неправильный css … как мне убедиться, что .page_css загружается только после завершения анимации?