На сайте zatok.net установлено адаптивное меню. Когда сайт просматриваешь с мобильного устройства, то при нажатие на меню происходит зависание на 5-6 секунд. Спустя паузу меню открывается и работает намного быстрее (но иногда тоже подтармаживает). Не могу понять с чем это связано. Меню работает без jQuery в связке с скриптом. Скрипт минимизировал и, к сожалению, исходник не сохранил.
Суть скрипта, состоит в том, что при определённом разрешении он событие клика обрабатывает как :hover . Может я горожу огород, но в таком виде как сейчас, меню мне очень нравиться. Одна проблема - тормоза. Помогите..
P.S смотрть/проверять нужно только с мобильного устройства.
P.S2 заметил, что скорость открытия зависит от скорости мобильного интернета. Wtf?!
(function(w){
var adJust, nav, navLiA, navLi, toggleMenu, toggleClass, ww, sizeChange, screenMinWidth;
var displayCache = {};
screenMinWidth = 768
ww = document.body.clientWidth;
toggleMenu = document.querySelector('.toggleMenu');
navLiA = document.querySelectorAll('.nav li a');
nav = document.querySelector('.nav');
w.onload = function(){
this.addEventListener('resize' , sizeChange);
if(!!this['onorientationchange']) this.addEventListener('onorientationchange' , sizeChange);
for(n in navLiA) {
(function(el){
if(!!el.nextElementSibling) {
if(!!el.classList)
el.classList.add('parent');
else
el.className = 'parent';
}
})(navLiA[n]);
}
toggleMenu.addEventListener('click', function(e){
e.preventDefault();
toggleClass(this, 'active');
toggle(nav);
});
adJust();
};
sizeChange = function(){
ww = document.body.clientWidth;
adJust();
};
adJust = function(){
var navLi, navLiAParent;
toggleMenu = document.querySelector('.toggleMenu');
navLiA = document.querySelectorAll('.nav li a');
nav = document.querySelector('.nav');
navLi = document.querySelectorAll('.nav li');
navLiAParent = document.querySelectorAll('.nav li a.parent');
if(ww < screenMinWidth) {
for(n in navLiAParent) {
(function(el){
var ll;
if(!!el.nextElementSibling) {
ll = document.createElement('div');
ll.setAttribute('class', 'll');
el.parentNode.appendChild(ll);
}
})(navLiAParent[n]);
}
toggleMenu.style.display = 'inline-block';
if(toggleMenu['classList'] && !toggleMenu.classList.contains('active')) {
nav.style.display = 'none';
} else {
nav.style.display = '';
}
for(var i in navLi) {
(function(el){
if(!(el instanceof HTMLElement))
return false;
else {
el.removeEventListener('mousemove', toggleHover);
el.removeEventListener('mouseleave', toggleHover);
}
})(navLi[i]);
}
var navLiLL = document.querySelectorAll('.nav li .ll');
for(var i in navLiLL) {
(function(el){
if(!(el instanceof HTMLElement))
return false;
el.removeEventListener('click', toggleHoverClk);
el.addEventListener('click', toggleHoverClk)
})(navLiLL[i]);
}
} else {
toggleMenu.style['display'] = "none";
nav.style['display'] = '';
for(var n in navLi) {
(function(el, className){
if (el.classList)
el.classList.remove(className);
else if (!el['className'])
el['className'] = className;
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
})(navLi[n], 'hover');
}
for(var n in navLi) {
(function(el){
if(!(el instanceof HTMLElement))
return false;
else {
if(el.querySelector('a')) {
el.querySelector('a').removeEventListener('click', toggleHoverClk);
}
el.removeEventListener('mousemove', toggleHover);
el.removeEventListener('mouseleave', toggleHover);
el.addEventListener('mouseleave', toggleHover);
el.addEventListener('mousemove', toggleHover);
}
})(navLi[n]);
}
}
};
function toggleHover(e){
if(e.type === 'mouseleave') {
if (this.classList)
this.classList.remove('hover');
else
this.className = this.className.replace(new RegExp('(^|\\b)' + 'hover'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
} else if (e.type === 'mousemove') {
if (this.classList)
this.classList.add('hover');
else
this.className += ' ' + 'hover';
}
// toggleClass(this ,'hover')
}
function toggleHoverClk(e){
e.preventDefault();
toggleClass(this.parentNode, 'hover');
}
function toggleClass(el, className){
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
else
classes.push(className);
el.className = classes.join(' ');
}
};
function getRealDisplay(elem) {
if (elem.currentStyle) {
return elem.currentStyle.display
} else if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(elem, null )
return computedStyle.getPropertyValue('display')
}
}
function hide(el) {
if (!el.getAttribute('displayOld')) {
el.setAttribute("displayOld", el.style.display)
}
el.style.display = "none"
}
function isHidden(el) {
var width = el.offsetWidth, height = el.offsetHeight,
tr = el.nodeName.toLowerCase() === "tr"
return width === 0 && height === 0 && !tr ?
true : width > 0 && height > 0 && !tr ? false : getRealDisplay(el)
}
function toggle(el) {
isHidden(el) ? show(el) : hide(el)
}
function show(el) {
if (getRealDisplay(el) != 'none') return
var old = el.getAttribute("displayOld");
el.style.display = old || "";
if ( getRealDisplay(el) === "none" ) {
var nodeName = el.nodeName, body = document.body, display
if ( displayCache[nodeName] ) {
display = displayCache[nodeName]
} else {
var testElem = document.createElement(nodeName)
body.appendChild(testElem)
display = getRealDisplay(testElem)
if (display === "none" ) {
display = "block"
}
body.removeChild(testElem)
displayCache[nodeName] = display
}
el.setAttribute('displayOld', display)
el.style.display = display
}
}
})(window);
