【问题标题】:My javascript is too slow [closed]我的javascript太慢了[关闭]
【发布时间】:2012-09-07 13:04:59
【问题描述】:

我的 JavaScript 代码让我的网​​站变得很慢,我不知道我能做什么,也许可以优化它,但我做到了并压缩了 JS 文件。

有人可以帮助我吗?

这是我的代码:

$(document).ready(function(){
    // opacity #citation
    var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
    scrollorama.animate('#citation',
    { delay: 5, duration: 250, property:'opacity', start:1 
});

//PARRALAX
$('#nav').localScroll(800);
$('#first_nav').localScroll(800);
RepositionNav();
$(window).resize(function(){
    RepositionNav();
}); 

$('#intro').parallax("50%", 0, 0.1, true);
$('#first').parallax("50%", 0, 0.0, false);
$('#second').parallax("50%", 0, 0.1, true);

$('#third').parallax("50%", 0, 0.3, true);

$('#fourth').parallax("50%", 0, 0.3, true);
    $('.work3').parallax("70%", 6800, 0.1, true);
$('#six').parallax("50%", 0, 0.3, true);
    $('.work4').parallax("20%", 7800, 0.1, true);

// SCROLL EFFECT
$(window).scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('#titre_p h2').stop().animate({ width: "60px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 300) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 310) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 1, fontSize: "1.9em"}, 100 );
        }
    /*titre_2*/
    if ($(this).scrollTop() > 0) {
        $('#titre_p2 h2').stop().animate({ width: "0px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 1360) {
        $('#titre_p h2').stop().animate({ width: "190px", opacity: 0, fontSize: "0em"}, 500 );   
        }
    if ($(this).scrollTop() > 1370) {
        $('#titre_p2 h2').stop().animate({ width: "190px", opacity: 1, fontSize: "1.9em"}, 500 );
        }


    $('.work1').parallax("70%", 3740, 0.2, true);   
    if ($(this).scrollTop() > 1558) {
           $('.work1').parallax("70%", 2820, 0.8, true);   
    }

    $('.work2').parallax("23%", 5950, 2.1, true);        
    if ($(this).scrollTop() > 2528) {
        $('.work2').parallax("23%", 3798, 2.8, true);   
    }

    if ($(this).scrollTop() > 1370) {
        $("#work").removeClass('out').addClass('in'); 
    }   

})
})

【问题讨论】:

  • 为了我们的帮助,您能否将您的问题更具体一些。 JavaScript 的哪一部分很慢?
  • 另外你应该告诉我们代码实际做什么或应该做什么。
  • parallax() 函数是什么?插件?
  • @ManseUK: stephband.info/jparallax 。无论如何,我认为从 IE6 切换会更快。

标签: javascript jquery performance optimization jquery-plugins


【解决方案1】:

您正在调用滚动事件的 animate() 方法。此事件在用户拖动滚动条时不断触发。这会导致很多非常昂贵的 animate() 调用。

仅通过查看您的代码很难说出您想要创建的确切效果,因此我无法建议您选择替代方案。您想详细说明您想要实现的目标吗?

【讨论】:

  • 好的,谢谢您的回答。所以我想积累两件事: - 视差效果 ($('#intro').parallax("50%", 0, 0.1, true); ) - 当你滚动时,一些事情发生在从顶部定义的像素处( if ($(this).scrollTop() > 2528) ...) 当我把这两个效果累加起来,就是这样: if ($(this).scrollTop() > 2528) { $('.work2').视差("23%", 3798, 2.8, true);所以我只想从滚动中停止或更改定义像素处的视差效果
猜你喜欢
  • 1970-01-01
  • 2017-08-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多