我的网站有两个问题要解决
正确的事件绑定：考虑使用首选的.on（）方法而不是.click（）,. bind（）,.。hover（）,. load（）,. ready（）等。
CACHE JQUERY OBJECTS：请尽可能多地缓存多次使用的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">×</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">×</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">×</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',
});
});
答案 0 :(得分：0)
当您拨打电话时，$("#accordion1").rlAccordion();可能会有回复（不熟悉您正在使用的图书馆），所以您可以说var acc1 = $("#accordion1").rlAccordion();这就是我的猜测为什么审核你的代码的人会说你可以缓存这些代码，而不是再次调用它们。但是，你需要通过很多代码来解决这个问题，而且我不确定这是否是一个不必要的优化：如果你再也没有使用过手风琴，那么就没有了指出一个变量来保存该引用。