Question

我目前正在构建一个简单的“jQuery Image Slider”，但它不能像我希望的那样工作。这是令人难以置信的缓慢和无反应，最后一张图片没有做任何事情。

有什么问题？

提前致谢

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

Answer 2

它取决于各种各样的事情，你是在前面加载所有图像，甚至图像的大小都很重要。

所有后续请求都应缓存在浏览器中。

如果可能的话，你应该使用一些缓存机制。

jQuery Image Slider - 性能问题

2 个答案: