jQuery скрипты работают очень медленно

Question

У меня большая проблема. Я создал сайт, используя jQuery, но работает очень медленно. На мобильных телефонах это ужасно! И я не знаю, что случилось ... Кто-то может мне помочь?

Ссылки еще не работают, потому что я хочу использовать CMS на этом макете, но прежде чем хочу немного оптимизировать эти сценарии.

Вот тестовый сайт: http://wm.pawelgorastudio.pl

А вот скрипты:

<script type="text/javascript" src="js/css3-mediaqueries.js"></script> 
<script type="text/javascript" src="js/picturefill.js"></script> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="js/jquery.color.plus-names-2.1.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

<!-- Magnific Popup core JS file --> 
<script src="js/jquery.magnific-popup.min.js"></script> 

<!-- jQuery carouFredSel JS file --> 
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script> 

<!--Adobe TypeKit fonts - https://typekit.com--> 
<script type="text/javascript" src="//use.typekit.net/eiz5mrm.js"></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

<!-- Preloader --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     $(".preloader").delay(100).fadeOut(1000); 
    }) 
</script> 

<!-- Image viewer --> 
<script type='text/javascript'> 
    $(document).ready(function() { 
     $('.image-link').magnificPopup({type:'image'}); 
    }); 
</script> 

<!-- All div links engine for Internet Explorer --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".mainmenu1 a, .mainmenu2 a, .rowclients a").click(function(event) { 
      event.preventDefault(); window.location = $(this).attr("href"); 
     }); 
    }); 
</script> 

<!-- Top menu links hover animation --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".topmenu2 .topContact a").hover(
      function() { 
       $(this).stop().animate({"color": "#B2B2B2"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#666666"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".topmenu2 #ENDesk a, .topmenu2 #ENMobile a").hover(
      function() { 
       $(this).stop().animate({"color": "#FF6400"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#CCCCCC"}, 250); 
      } 
     ); 
    }); 
</script> 

<!-- Main menu links animation --> 
<script type='text/javascript'> 
    $(document).ready(function anime(){ 
     setInterval(function(){ 
      $(".A1b").delay(0).animate({"opacity": "1"}, 500, "swing"); 
      $(".A1b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A3b").delay(250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A3b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A4b").delay(500).animate({"opacity": "1"}, 500, "swing"); 
      $(".A4b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A6b").delay(750).animate({"opacity": "1"}, 500, "swing"); 
      $(".A6b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A8b").delay(1000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A8b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A9b").delay(1250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A9b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".anime-2img").delay(1500).animate({left: "195px", top: "100px"}, 700, "swing"); 
      $(".anime-5img").delay(1500).animate({left: "181px", top: "97px"}, 700, "swing"); 
      $(".anime-7img").delay(1500).animate({left: "1px", top: "7px"}, 700, "swing"); 
      $(".anime-3img").delay(1600).animate({left: "80px"}, 500, "swing"); 
      $(".anime-3txt").delay(1600).animate({left: "80px"}, 500, "swing"); 
      $(".anime-4img").delay(1600).animate({top: "30px"}, 500, "swing"); 
      $(".anime-4txt").delay(1600).animate({top: "30px"}, 500, "swing"); 
      $(".A1b").delay(3000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A1b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A3b").delay(3250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A3b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A4b").delay(3500).animate({"opacity": "1"}, 500, "swing"); 
      $(".A4b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A6b").delay(3750).animate({"opacity": "1"}, 500, "swing"); 
      $(".A6b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A8b").delay(4000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A8b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A9b").delay(4250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A9b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".anime-2img").delay(4500).animate({left: "51px", top: "12px"}, 700, "swing"); 
      $(".anime-5img").delay(4500).animate({left: "1px", top: "7px"}, 700, "swing"); 
      $(".anime-7img").delay(4500).animate({left: "181px", top: "97px"}, 700, "swing"); 
      $(".anime-3img").delay(4600).animate({left: "100px"}, 500, "swing"); 
      $(".anime-3txt").delay(4600).animate({left: "100px"}, 500, "swing"); 
      $(".anime-4img").delay(4600).animate({top: "43px"}, 500, "swing"); 
      $(".anime-4txt").delay(4600).animate({top: "43px"}, 500, "swing"); 
     }, 10000); 
    }); 
</script> 

<!-- Social links hover animation and links engine for Internet Explorer --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".B1a").hover(
      function() { 
       $(this).stop().animate({"opacity": "0"}, 500); 
      }, 
      function() { 
       $(this).stop().animate({"opacity": "1"}, 500); 
      } 

     ); 
     $(".fadehover a").click(function(event) { 
      event.preventDefault(); window.open($(this).attr("href")); 
     }); 
    }); 
</script> 

<!-- Submenu links hover animation and engine for mobile menu --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenu#MobileMenu").fadeOut(0); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#EnterMenu").hover(
      function() { 
       $(".submenu#Mobile p").stop().animate({"color": "#FFFFFF"}, 250); 
       $(".M1a").stop().animate({"opacity": "0"}, 250); 
      }, 
      function() { 
       $(".submenu#Mobile p").stop().animate({"color": "#333333"}, 250); 
       $(".M1a").stop().animate({"opacity": "1"}, 250); 
      } 
     ); 
     $("#EnterMenu").click(function(event) { 
      event.preventDefault(); 
      $(".submenu#MobileMenu").fadeIn(250); 
      $('.submenu#MobileMenu .submenuList a').each(function(i) { 
       var margins = 25 - ($(this).height()/2) + "px"; 
       $(this).css({"margin-top": margins, "margin-bottom": margins}); 
      }); 
     }); 
    }); 
</script> 

<script type='text/javascript'> 
    $(window).load(function() { 
     $('.submenu#DeskMenu .submenuList').each(function(i) { 
      var margins = 25 - ($(this).height()/2) + "px"; 
      $(this).css({"margin-top": margins, "margin-bottom": margins}); 
     }); 
    }); 
    $(window).resize(function() { 
     $('.submenu#DeskMenu .submenuList, .submenu#MobileMenu .submenuList a').each(function(i) { 
      var margins = 25 - ($(this).height()/2) + "px"; 
      $(this).css({"margin-top": margins, "margin-bottom": margins}); 
     }); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenu a").hover(
      function() { 
       $(this).stop().animate({"color": "#FFFFFF"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#333333"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenuList p").hover(
      function() { 
       $(this).stop().animate({"color": "#FFFFFF"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#333333"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#CloseMenu").hover(
      function() { 
       $("#Close p").stop().animate({"color": "#FFFFFF"}, 250); 
       $(".C1a").stop().animate({"opacity": "0"}, 250); 
      }, 
      function() { 
       $("#Close p").stop().animate({"color": "#333333"}, 250); 
       $(".C1a").stop().animate({"opacity": "1"}, 250); 
      } 
     ); 
     $("#CloseMenu").click(function(event) { 
      event.preventDefault(); 
      $(".submenu#MobileMenu").fadeOut(250); 
     }); 
    }); 
</script> 

<!-- Clients list animation --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     $('.clientsImg').each(function(i) { 
      var clients = $('.clientsImg'); 
      var index = clients.index(this); 
      var next = clients[index+1]; 
      var prev = clients[index-1]; 
      $(this).css("top", 27 - ($(this).height()/2) + "px"); 
      if (i == 0) { 
       $(this).css("left", 0); 
      } 
      else { 
       $(this).css("left", $(prev).width() + $(prev).position().left + 40 + "px"); 
      } 
      window.TotalWidth = 0; 
      $('.clientsList').find('.clientsImg').each(function() { 
       window.TotalWidth += $(this).width() + 40; 
      }); 
      $('.clientsList').width(TotalWidth); 
     }); 
     (function fly() { 
      $('.clientsImg').animate({left: "-=1px"}, 10, "linear", function() { 
       if ($(this).position().left <= 0 - $(this).width()) { 
        $(this).css("left", "+=" + TotalWidth + "px"); 
       } 
       fly(); 
      }); 
     }()); 
    }); 
</script> 

<!-- Footer list hover animation --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".rowfooter a").hover(
      function() { 
       $(this).stop().animate({"color": "#4C4C4C"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#999999"}, 250); 
      } 
     ); 
    }); 
</script> 

<!-- Cookies Info box animation engine for display it and set and read cookies engine --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
     $(".cookiesInfo").css({opacity: 0, bottom: cookieHeight}); 
     if ($.cookie("cookieBox") != 1) { 
      var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
      $(".cookiesInfo").delay(1100).animate({opacity: 1, bottom: 0}, 1000, "swing"); 
     } 
    }) 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".C2a").hover(
      function() { 
       $(this).stop().animate({"opacity": "0"}, 500); 
      }, 
      function() { 
       $(this).stop().animate({"opacity": "1"}, 500); 
      } 
     ); 
     $(".closecookiesInfo a").click(function(event) { 
      event.preventDefault(); 
      $.cookie("cookieBox", 1); 
      var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
      $(".cookiesInfo").animate({opacity: 0, bottom: cookieHeight}, 1000, "swing"); 
     }); 
    }); 
</script> 

Answer 1

с iphone 3g/с вы должны учитывать, что они власть это действительно медленно по сравнению с новыми моделями, и если вы имеют время this article у него есть некоторые твердые точки по теме, а javascript интерпретируется медленнее ..

даже на сайте это «маленький» только 64 request и 252kb передачи и по-прежнему плохо работают на мобильных телефонах, поэтому единственное, что я думаю об этом, - это сжать файлы, соединяя их все вместе, уменьшая изображение, используя текст с помощью css или sprites. поэтому запрос меньше, и это не важно для скорости работы, но очень полезно обрабатывать события для мобильных устройств, попробуйте избежать использования click, если вы знаете, что это мобильное устройство или имеет сенсорные возможности. вы можете использовать jQuery mobile или JQT для обработки таких событий, таких как tap или double tap.

избегая также использовать несколько:

$(document).ready(function() { 

}); 

и

$(document).load(function() { 

}); 

вы можете проверить this answer для справки.