Question

我的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'); 
    }   

})
})

Answer 1

您正在调用scroll事件上的animate（）方法。当用户拖动滚动条时，会不断触发此事件。这会导致许多非常昂贵的animate（）调用。

很难通过查看代码来确定您想要创建的效果，因此我不能建议您替代。您想详细说明您想要实现的目标吗？

我的javascript太慢了

1 个答案: