javascript - jQuery 图像 slider - 性能问题

Question

我目前正在构建一个简单的“jQuery Image Slider”，但它并没有像我希望的那样工作。它非常缓慢且 react 迟钝，最后一张图片什么也没做。

网址:http://fusionmedia.dk/jquery/

问题是什么？

提前致谢

Answer 1

指定更快的速度。它默认为较慢的速度。

$('#gallery').delegate('img', 'mouseover', function() {

                $this = $(this);

                for(var i = 0; i <= $this.siblings().size(); i++) {

                    if($this.index() > i) {

                        $this.siblings().eq(i).stop().animate({ left: (i * 50) + 'px' }, 300);

                    } else {

                        $this.siblings().eq(i).stop().animate({ left: ((i * 50) + 500) + 'px' }, 300);

                    }

                }

            });

编辑:

你有 2 个非常糟糕的速度问题。

1:每次他们悬停时，您都在运行一个耗时的循环。

2:你调用 $this.siblings() 的次数太多了。缓存那个。

这是一个如何更好地实现其中一些的示例，我仍然让你在悬停事件中循环，你应该尝试将其移出。

$(function(){

         $('#gallery').find('img').each(function(){

            $this = $(this);
            $this.css('left', $this.index() * 50 + 'px');

         });

         $('#gallery').delegate('img', 'mouseover', function(){

            $this = $(this);
            var $sibs = $this.siblings();
            for (var i = 0; i <= $sibs.size(); i++) {

               if ($this.index() > i) {

                  $sibs.eq(i).stop().animate({
                     left: (i * 50) + 'px'
                  });

               } else {

                  $sibs.eq(i).stop().animate({
                     left: ((i * 50) + 500) + 'px'
                  });
               }
            }
         });
      });