jQuery响应式导航延迟

时间:2013-05-31 14:02:05

标签: jquery plugins responsive-design

现在我使用下面列出的两个插件。第二个插件导致第一个插件(http://www.berriart.com/sidr/#development)延迟。我无法弄清楚为什么。这是我的网站http://www.jonasandnicole.com,您必须缩小导航才能看到移动导航。

Sidr jQuery

<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>  

Smooth Scroll jQuery

<script src="js/jquery.easing.1.3.js"></script>
<script>
$(function() {
var lengthDiv = $('.desktop').find('li').length;
var current = 0;
$('a').bind('click',function(event){

var $anchor = $(this);
current = $anchor.parent().index();

$('html, body').stop().animate({
    scrollTop: $($anchor.attr('href#')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
$(document).keydown(function(e){if($(':focus').length <= 0)e.preventDefault()})
$(document).keyup(function(e){
    var key = e.keyCode;
    if(key == 38 && current > 0){
        $('.desktop').children('li').eq(current - 1).children('a').trigger('click')
    }else if(key == 40 && current < lengthDiv){
        $('.desktop').children('li').eq(current + 1).children('a').trigger('click')
    }
})
});
</script>

1 个答案:

答案 0 :(得分:0)

Javascripts按照它们包含在页面中的顺序执行。我至少建议在像retina.js这样可以独立运行的东西上使用defer(也许是async)属性。考虑将那些给您带来麻烦的脚本移动到另一个文件中,以便您可以在那里使用相同的技术。

如果我在看到菜单元素后立即点击菜单元素,我会看到一点延迟,但如果我等待一点点完成执行(Chrome 27),我认为没有延迟。听起来像这只是一个性能调整的事情,你需要让你的其他项目异步和延迟执行,这样你的sidr调用才能完成。