Вопрос:

Правильная привязка событий и кеширование объектов jquery

javascript jquery object caching

156 просмотра

1 ответ

8 Репутация автора

У меня есть две проблемы для моего сайта

  1. Правильное связывание событий: рассмотрите возможность использования предпочтительного метода .on () вместо .click (), .bind (), .hover (), .load (), .ready () и т. Д.

  2. КЕШИТЬ ОБЪЕКТЫ JQUERY: Пожалуйста, кэшируйте объекты jQuery, которые используются более одного раза, когда это возможно, это очень поможет с производительностью сайта.

Можешь мне помочь?

Это мой полный сценарий:

 /*-----------------------------
              SCRIPTS
  -----------------------------*/

   (function() {
      "use strict";

     /*--------------------------
                LOADER
      --------------------------*/

     $('.page-loading').fadeOut();
     $('.loader').delay(350).fadeOut('slow');

     /*--------------------------
                VIDEO
      --------------------------*/

     $("#bgndVideo").YTPlayer();
     $("#bgndVideo-2").YTPlayer();

     /*--------------------------
               ACCORDION
      ---------------------------*/

     $("#accordion1").rlAccordion();

     $("#accordion2").rlAccordion('single', {
        titles: "h3", // html tag parent of minus and plus, this may replaced also for a class
        childNum: 2, // number of the children start open
        open: "+", // unicode plus sign
        close: "−", // unicode minus sign
     });

     $("#accordion3").rlAccordion('mix', {
        titles: "h3",
        childNum: 2,
        open: "+",
        close: "−",
     });

     $("#accordion4").rlAccordion('mix', {
        titles: "h3",
        childNum: 4,
        open: "+",
        close: "−",
     });

     $("#accordion5").rlAccordion('single', {
        titles: "h4",
        childNum: 1,
        open: "+",
        close: "−",
     });

     $("#accordion6").rlAccordion('mix', {
        titles: "h4",
        childNum: 2,
        open: "+",
        close: "−",
     });

     $("#accordion7").rlAccordion('mix', {
        titles: "h4",
        childNum: 2,
        open: "+",
        close: "−",
     });

     $("#accordion8").rlAccordion('mix', {
        titles: "h4",
        childNum: 4,
        open: "+",
        close: "−",
     });

     /*--------------------------
                  TABS
      ---------------------------*/

     $('#tabs-scale').tabulous({
        effect: 'scale'
     });

     $('#tabs-slide-left').tabulous({
        effect: 'slideLeft'
     });

     $('#tabs-slide-left-2').tabulous({
        effect: 'slideLeft'
     });

     $('#tabs-flip').tabulous({
        effect: 'flip'
     });

     /*--------------------------
             ANIMATED TEXT
      ---------------------------*/

     $('.tlt-adventure').textillate({
        minDisplayTime: 3800,
        in : {
           effect: 'flipInY',
           reverse: false,
        },
        out: {
           delay: 3,
           effect: 'fadeOut'
        },
        loop: true
     });

     $('.tlt-left').textillate({
        minDisplayTime: 1000,
        in : {
           effect: 'flipInY',
           reverse: false,
        },
        out: {
           delay: 3,
           effect: 'fadeOut'
        },
        loop: true
     });

     $('.tlt-right').textillate({
        minDisplayTime: 1000,
        in : {
           effect: 'flipInY',
           reverse: true,
        },
        out: {
           delay: 3,
           effect: 'fadeOut'
        },
        loop: true
     });

     /*--------------------------
             OWL CAROUSEL
      ---------------------------*/

     $('.slide-home').owlCarousel({
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        items: 1,
        rewind: true,
        pagination: true,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: false,
     });

     $('.slide-home-2').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 1000,
        pagination: true,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: false,

     });

     $(".slide-v-l").owlCarousel({
        animateOut: 'slideOutUp',
        animateIn: 'slideInUp',
        items: 1,
        rewind: true,
        smartSpeed: 650,
        autoplay: true,
        autoplayTimeout: 4000,
        dots: false,
        mouseDrag: false,
     });

     $(".slide-v-r").owlCarousel({
        animateIn: 'slideOutUp',
        animateOut: 'slideInUp',
        items: 1,
        rewind: true,
        smartSpeed: 650,
        autoplay: true,
        autoplayTimeout: 4000,
        dots: false,
        mouseDrag: false,
     });

     $('.slide-h-l').owlCarousel({
        animateIn: 'fadeInLeft',
        animateOut: 'fadeOut',
        items: 1,
        rewind: true,
        smartSpeed: 650,
        autoplay: true,
        autoplayTimeout: 4000,
        dots: false,
        mouseDrag: false,
     });

     $('.slide-h-r').owlCarousel({
        animateIn: 'fadeInRight',
        animateOut: 'fadeOut',
        items: 1,
        rewind: true,
        smartSpeed: 650,
        autoplay: true,
        autoplayTimeout: 4000,
        dots: false,
        mouseDrag: false,
     });

     $('.creative').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 450,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navText: [
           "<img src='img/icon/arrow2-left.png'>",
           "<img src='img/icon/arrow2-right.png'>"
        ],
     });

     $('.testimonial').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 450,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        nav: false,
     });

     $('.box-slide-1').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 1000,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        dots: true,
     });

     $('.box-slide-2').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 450,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        nav: false,
     });

     $('.blog-slide').owlCarousel({
        items: 1,
        rewind: true,
        smartSpeed: 450,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navText: [
           "<img src='img/icon/arrow2-left.png' width='25' height='25'>",
           "<img src='img/icon/arrow2-right.png' width='25' height='25'>"
        ],
     });

     $('.clients-1').owlCarousel({
        loop: true,
        items: 5,
        rewind: true,
        smartSpeed: 1000,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        dots: false,
        nav: false,
        responsive: {
           0: {
              items: 3,
              margin: 10
           },
           480: {
              items: 4,
              margin: 20
           },
           768: {
              items: 5,
              margin: 20
           },
           992: {
              items: 5,
              margin: 50
           },
           1200: {
              items: 5,
              margin: 50
           }
        }
     });

     $('.portfolio-single').owlCarousel({
        items: 2,
        loop: true,
        margin: 40,
        autoplay: true,
        autoplayTimeout: 3000,
        rewind: true,
        smartSpeed: 750,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navText: [
           "<img src='img/icon/arrow-left.png' width='40' height='40'>",
           "<img src='img/icon/arrow-right.png' width='40' height='40'>"
        ],
        responsive: {
           0: {
              items: 1
           },
           480: {
              items: 2
           }
        }
     });

     /*--------------------------
             NAVBAR SCROLL
      ---------------------------*/

     $(window).on('scroll', function() {
        if ($(document).scrollTop() > 50) {
           $('.nav-light').addClass('shrink');
        } else {
           $('.nav-light').removeClass('shrink');
        }
        if ($(document).scrollTop() > 50) {
           $('.nav-dark').addClass('shrink');
        } else {
           $('.nav-dark').removeClass('shrink');
        }
        if ($(document).scrollTop() > 50) {
           $('.nav-transparent').addClass('shrink');
        } else {
           $('.nav-transparent').removeClass('shrink');
        }
     });

     /*--------------------------
           VALIDOR FORM EMAIL
      ---------------------------*/

     $('#form-contact').validator();
     $('#form-contact').on('submit', function(e) {
        if (!e.isDefaultPrevented()) {
           var url = "contact.php";
           $.ajax({
              type: "POST",
              url: url,
              data: $(this).serialize(),
              success: function(data) {
                 var messageAlert = 'alert-' + data.type;
                 var messageText = data.message;
                 var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                 if (messageAlert && messageText) {
                    $('#form-contact').find('.messages').html(alertBox);
                    $('#form-contact')[0].reset();
                 }
              }
           });
           return false;
        }
     });

     $('#form-comments').validator();
     $('#form-comments').on('submit', function(e) {
        if (!e.isDefaultPrevented()) {
           var url = "contact.php";
           $.ajax({
              type: "POST",
              url: url,
              data: $(this).serialize(),
              success: function(data) {
                 var messageAlert = 'alert-' + data.type;
                 var messageText = data.message;
                 var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                 if (messageAlert && messageText) {
                    $('#form-comments').find('.messages').html(alertBox);
                    $('#form-comments')[0].reset();
                 }
              }
           });
           return false;
        }
     });

     $('#form-newsletter').validator();
     $('#form-newsletter').on('submit', function(e) {
        if (!e.isDefaultPrevented()) {
           var url = "contact.php";
           $.ajax({
              type: "POST",
              url: url,
              data: $(this).serialize(),
              success: function(data) {
                 var messageAlert = 'alert-' + data.type;
                 var messageText = data.message;

                 var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                 if (messageAlert && messageText) {
                    $('#form-newsletter').find('.messages').html(alertBox);
                    $('#form-newsletter')[0].reset();
                 }
              }
           });
           return false;
        }
     });

     /*--------------------------
              SEARCH FORM
      ---------------------------*/

     $('a[href=".form-search"]').on('click', function(event) {
        event.preventDefault();
        $('.form-search').addClass('open');
        $('.form-search > form > input[type="search"]').focus();
     });

     $('.form-search, .form-search button.close').on('click keyup', function(event) {
        if (event.target === this || event.target.className === 'close' || event.keyCode === 27) {
           $(this).removeClass('open');
        }
     });

     /*-------------------------- 
           DROPDOWN MENU 
     ---------------------------*/

     $(".dropdown").on('hover', function() {
           $('.dropdown-menu', this).stop().fadeIn("fast");
        },
        function() {
           $('.dropdown-menu', this).stop().fadeOut("fast");
        });
     $(".dropdown").hover(
        function() {
           $(this).addClass('open');
        },
        function() {
           $(this).removeClass('open');
        });

     /*--------------------------
           SKILL BAR CIRCLE
      ---------------------------*/

     function animateElements() {
           $('.progressbar').each(function() {
              var elementPos = $(this).offset().top;
              var topOfWindow = $(window).scrollTop();
              var percent = $(this).find('.circle').attr('data-percent');
              var percentage = parseInt(percent, 10) / parseInt(100, 10);
              var animate = $(this).data('animate');
              if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
                 $(this).data('animate', true);
                 $(this).find('.circle').circleProgress({
                    startAngle: -Math.PI / 2,
                    value: percent / 100,
                    //thickness: 2,/*border radius*/
                    //size: 120,
                    emptyFill: 'rgba(0, 0, 0, 0)',
                    //fill: { color: "#fff" } 
                 }).on('circle-animation-progress', function(event, progress, stepValue) {
                    $(this).find('div').text((stepValue * 100).toFixed(0) + "%");
                 }).stop();
              }
           });
        }
        // Show animated elements
     animateElements();
     $(window).scroll(animateElements);

     /*--------------------------
              SKILL BAR
      ---------------------------*/

     jQuery('.skillbar').each(function() {
        jQuery(this).appear(function() {
           jQuery(this).find('.count-bar').animate({
              width: jQuery(this).attr('data-percent')
           }, 3000);
           var percent = jQuery(this).attr('data-percent');
           jQuery(this).find('.count').html('<span>' + percent + '</span>');
           var t = $(this);

           function perc() {
              var length = t.find('.count-bar').css('width'),
                 perc = Math.round(parseInt(length) / 8),
                 length2 = document.getElementById("skill-item").offsetWidth,
                 perc2 = Math.round(parseInt(length) / parseInt(length2) * 100);
              //t.find('.count').text(perc+'%');
              t.find('.count').text(parseInt(perc2) + '%');
           }
           perc();
           setInterval(perc, 0);
        });
     });

     /*--------------------------
                COUNTER
      ---------------------------*/

     $('.counter').counterUp({
        delay: 50,
        time: 3000
     });

     /*--------------------------
               COUNTDOWN
      ---------------------------*/

     $('.countdown').downCount({
           date: '09/03/2017 12:00:00',
           offset: +10
        },
        function() {
           alert('WOOT WOOT, done!');
        });

     /*--------------------------
            SRCOLL TO TOP
      ---------------------------*/

     var offset = 300,
        offset_opacity = 1200,
        scroll_top_duration = 700,
        $back_to_top = $('.cd-top');

     $(window).on('scroll',function() {
        ($(this).scrollTop() > offset) ?
        $back_to_top.addClass('cd-is-visible'): $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if ($(this).scrollTop() > offset_opacity) {
           $back_to_top.addClass('cd-fade-out');
        }
     });

     $back_to_top.on('click', function(event) {
        event.preventDefault();
        $('body,html').animate({
           scrollTop: 0,
        }, scroll_top_duration);
     });

     /*--------------------------
            MAGNIFIC POPUP
      ---------------------------*/

     $('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        fixedContentPos: false, // fix scrollbar
        image: {
           titleSrc: function(item) {
              return item.el.attr('title') + '<small>by WGA | Umberto</small>';
           }
        },
        gallery: {
           enabled: true
        },
        zoom: {
           enabled: true,
           duration: 500, // don't foget to change the duration also in CSS
           easing: 'ease-in-out', // CSS transition easing function
           opener: function(element) {
              return element.find('img');
           }
        }
     });

     $('.flexslider-lightbox').magnificPopup({
        type: 'image',
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        fixedContentPos: false, // fix scrollbar
        gallery: {
           enabled: true
        }, // this class is for CSS animation below
        zoom: {
           enabled: true,
           duration: 500,
           fixedContentPos: false, // fix scrollbar
           easing: 'ease-in-out',
           opener: function(openerElement) {
              return openerElement.is('img') ? openerElement : openerElement.find('img');
           }
        }
     });

     $('.image-link').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-with-zoom', // this class is for CSS animation belowf
        fixedContentPos: false, // fix scrollbar
        zoom: {
           enabled: true,
           duration: 500,
           easing: 'ease-in-out',
           opener: function(openerElement) {
              return openerElement.is('img') ? openerElement : openerElement.find('img');
           }
        }
     });

     $('.image-link-2').magnificPopup({
        type: 'image',
        removalDelay: 300,
        mainClass: 'mfp-fade',
        fixedContentPos: false, // fix scrollbar
        opener: function(openerElement) {
           return openerElement.is('img') ? openerElement : openerElement.find('img');
        }
     });

     $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false // fix scrollbar
     });

     /*--------------------------
             FLEXSLIDER
      ---------------------------*/

     $('.flexslider').flexslider({
        animation: "slide",
        controlNav: true,
        directionNav: false,
        slideshow: true,
        slideshowSpeed: 2000,
        pauseOnHover: true,
        start: function(slider) {
           $('.flexslider').resize();
        }
     });

     /*--------------------------
          SKROLLR / PARALLAX
      ---------------------------*/

     var s = skrollr.init({
        smoothScrolling: true,
        smoothScrollingDuration: 1500,
        forceHeight: false,
        mobileCheck: function() {
           if ((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)) {}
        }
     });

     $('.parallax').jarallax({
        speed: 0.2,
     });

     // for IE //
     if (document.documentMode || /Edge/.test(navigator.userAgent)) { // IE or Edge
        $('body').on("mousewheel", function() {
           // remove default behavior
           event.preventDefault();
           //scroll without smoothing
           var wheelDelta = event.wheelDelta;
           var currentScrollPosition = window.pageYOffset;
           window.scrollTo(0, currentScrollPosition - wheelDelta);
        });
     }

     /*--------------------------
           PARALLAX TEMPLATE
      ---------------------------*/

     $(document).on("scroll", onScroll);

     //smoothscroll
     $('.nav-dots-parallax a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function() {
           $(this).removeClass('active');
        });
        $(this).addClass('active');
        var target = this.hash,
           menu = target;
        $target = $(target);
        $('html, body').stop().animate({
           'scrollTop': $target.offset().top + 2
        }, 500, 'swing', function() {
           window.location.hash = target;
           $(document).on("scroll", onScroll);
        });
     });

     function onScroll(event) {
        var scrollPos = $(document).scrollTop();
        $('.nav-dots-parallax a').each(function() {
           var currLink = $(this);
           var refElement = $(currLink.attr("href"));
           if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
              $('.nav-dots-parallax ul li a').removeClass("active");
              currLink.addClass("active");
           } else {
              currLink.removeClass("active");
           }
        });
     }

     /*--------------------------
               ANIMATED
      ---------------------------*/

        new WOW().init();

     })();

     /*--------------------------
               ISOTOPE
     ---------------------------*/

     // portfolio filter
     $(window).on('load', function() {
        'use strict';
        var $portfolio_selectors = $('.portfolio-filter > li > a');
        var $portfolio = $('.portfolio-container');
        $portfolio.isotope({
           itemSelector: '.portfolio-item',
           transitionDuration: '1s',
        });
        $portfolio_selectors.on('click', function() {
           $portfolio_selectors.removeClass('active');
           $(this).addClass('active');
           var selector = $(this).attr('data-filter');
           $portfolio.isotope({
              filter: selector
           });
           return false;
        });

        // blog masonry
        var $blog = $('.blog-masonry');
        $blog.isotope({
           itemSelector: '.blog-item',
           transitionDuration: '1s',
        });
     });
Автор: Umberto Источник Размещён: 02.02.2017 06:37

Ответы (1)


0 плюса

2561 Репутация автора

Решение

Когда вы звоните, например, $("#accordion1").rlAccordion();может быть возврат (не знакомый с какой бы библиотекой вы не использовали), так что вы могли бы сказать, var acc1 = $("#accordion1").rlAccordion(); что я бы догадался, почему человек, который просматривает ваш код, скажет, что вы можете их кэшировать, а не звоню им снова. У вас есть много кода, чтобы пройтись здесь, хотя, и я не уверен, будет ли это бесполезной оптимизацией: если вы никогда больше не будете использовать аккордеон, тогда не будет смысла объявлять переменную держать эту ссылку.

Автор: David T. Macknet Размещён: 02.02.2017 09:10
Вопросы из категории :
32x32