0

我的js在这里遇到了一些问题。

它可以正常运行，但在某些情况下性能太慢。

我轻轻地滚动到底部，但是当我再次尝试向上滚动时，它滚动得很慢。

我能做些什么来提高性能？

谢谢！

$(function(){

var windowHeight = $(window).height();
var windowWidth = $(window).width();
var sectionsNumbers = $("#content section").length-1;
var sectionCount = 0;

// Scroll sets

var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth;
var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight;

$("#content").css("width", windowScrollX+windowWidth);
$("#content").css("height", windowScrollY+windowHeight);

$(".illusion1").css("width", windowScrollX+windowWidth);
$(".illusion1").css("height", windowScrollY+windowHeight);

// Set mask w and h

$("#mask").css("width", windowWidth);
$("#mask").css("height", windowHeight);
$(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight);

$("#content section").each(function() {

    // Defines its width and height

    $(this).css("width", windowWidth);
    $(this).css("height", windowHeight);

    // Defines its position
    $(this).css("left", sectionCount*windowWidth);
    $(this).css("top", sectionCount*windowHeight);

    sectionCount++;
});

// When window scrolls

$(window).scroll(function(){ 

    var curScrollTop = $(window).scrollTop();
    var angleVar = windowScrollX/windowScrollY;

    $("#content").stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 250, easing: 'easeOutQuart'});

    $(".illusion1").stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 250, easing: 'easeOutQuart'});

    //{duration: 1500, easing: 'easeOutQuart'}
    });
});
4

3 回答 3

2

您没有在动画中缓存选择器（并且重复使用 $(this) 或 $('#mask') 也很浪费），所以每次用户滚动时，它/searching the entire dom/ for #content, #错觉1. 此外，滚动动画有些多余，因为滚动本身就是一种“动画”。固定定位是理想的，但您可以通过在每个滚动上设置 CSS 样式来实现相同的效果。只是不要在每个滚动事件上使用动画。此外，您没有为 left 和 top 提供 'px'，这样做可以防止通过在前面加上“-”+ 来“转换”为字符串。尝试像这样重写 $(window).scroll 函数：

var $window = $(window),
    $content = $("#content"),
    $illusion = $(".illusion1");
$window.scroll(function(){ 
    var curScrollTop = $window.scrollTop();
    var angleVar = windowScrollX/windowScrollY;
    $content.css({ left: (-curScrollTop*angleVar)+'px', top: (-curScrollTop)+'px' });
    $illusion.css({ left: (-curScrollTop*angleVar*0.5)+'px', top: (-curScrollTop*0.5)+'px' });
});

如果您对动画效果很感兴趣，请考虑使用 debounce/throttle 方法。而不是在每个单独的滚动事件上制作动画，而是使用：“timeout = setTimeout(function(){ ... }, 25)”，它将在允许超时到期时执行动画，并且在滚动时只需 clearTimeout(timeout) 和再次设置超时。动画不会是实时的，因为除非用户停止滚动 25 毫秒，否则它永远不会执行。

于 2012-05-26T04:28:51.697 回答
1

不确定这是否会有所帮助，但是当我必须在滚动时相对于浏览器窗口移动元素时，我会使用某种形式的固定定位。我发现这在 Chrome 和其他浏览器中提供了比尝试设置或动画绝对或相对定位元素的偏移更好的性能。也许如果您可以制作一个jsfiddle来说明您想要达到的效果，我可以提供一些进一步的建议。

编辑：如果您可以提供一些 HTML 来代替 jsfiddle，那也会很有帮助。

于 2012-05-25T20:40:46.533 回答
0

我想说将整个捆绑包更改为 TweenLite，它的动画运行比 jQuery 更流畅。

http://www.greensock.com/v12/

您可以比较下面的差异。

http://www.greensock.com/js/speed.html

于 2012-05-29T16:07:08.653 回答