jQuery Image Slider - Performance issues

Question

Hello

I'm currently building a simple "jQuery Image Slider" but it does not work as i hoped. It's incredible slow and unresponsive, and the last image does not do anything.

URL: http://fusionmedia.dk/jquery/

What is the problem?

Thanks in advance

Answer 1

It depeneds on various things , are you loading all the images upfront and even size of the images matters alot.

All your subsequent requests should be cached in the browser.

you should use some caching mechanisims if possible.

Answer 2

Specify a faster speed. Its defaulting to a slower speed.

$('#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);

                    }

                }

            });

EDIT:

You have 2 really bad problems for speed.

1: You are running a time costly loop every time they hover.

2: You are calling $this.siblings() too many times. Cache that.

Here is an example of how to better implement some of this, I still have you loop inside the hover event, you should try and get that moved out.

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