JQuery AJAX загрузки разрывной страницы на быстрый клик - PullRequest
Новая
       22

JQuery AJAX загрузки разрывной страницы на быстрый клик

0 голосов
/ 04 марта 2019

страница, над которой я работаю, работает по адресу 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 Ответ

0 голосов
/ 04 марта 2019 
setTimeout(function(){
  $(".page_css").attr("href", "/CSS/home.css");
}, 400);`enter code here`

попытайтесь отключить этот тайм-аут, потому что ваша страница не успевает и не может правильно загрузить CSS 

$(".page_css").attr("href", "/CSS/home.css");
...