problems setting css with jquery

Question

I have created a slideshow with jquery. It clones an image in a container, moves it to the right, then slides it to the left and starts over. Here is the code:

$(document).ready(function() {
    var slideshow = new main.slideshow();
    slideshow.start({
        path: 'images/slideshow/',
        images: ['1', '2']
    });
});

var main = new (function() {

    this.slideshow = (function() {
        var self = this;
        var nextSlide, path, images, startLeft;
        var fileExtension = 'jpg';
        var container = $('#slideshow');
        var currentSlide = container.children('img');
        var timerlength = 4000;
        var currentSlideIndex = 0;

        this.start = function(args) {
            path = args['path'];
            images = args['images'];
            if (typeof args['fileExtension'] !== 'undefined') fileExtension = args['fileExtension'];
            container.css('overflow', 'hidden');
            currentSlide.css('position', 'absolute');
            startLeft = currentSlide.position();
            startLeft = startLeft.left;
            self.nextSlide();
        };

        this.nextSlide = function() {
            nextSlide = currentSlide.clone();
            nextSlide.css('left', (startLeft + currentSlide.width()) + 'px');
            currentSlideIndex++;
            if (currentSlideIndex >= images.length) currentSlideIndex = 0;
            nextSlide.attr('src', path + images[currentSlideIndex] + '.' + fileExtension);
            container.append(nextSlide);
            setTimeout(function() {
                self.slideToNext();
            }, timerlength);
        };

        this.slideToNext = function() {
            currentSlide.animate({
                left: '-' + (currentSlide.width() - startLeft) + 'px'
            }, 2000);
            nextSlide.animate({
                left: startLeft + 'px'
            }, 2000, function() {
                currentSlide.remove();
                currentSlide = nextSlide;
                self.nextSlide();
            });
        };
    });
});

A link to see this in action can be found here: https://dustinhendricks.com/breastfest/public_html/

The problem I'm having as you can see is that the second slide when first added to the dom, does not seem to be moved to the right when I call css('left', x); . After the first jQuery animation however, each cloned slide then seems to be able to be moved to the right with that call no problem. This leads me to believe that jquery's animate is setting something that allows for the object to be moved via css('left', x); , but what could it be changing? position is already being set to absolute.

This is why my example pages seems to take a while before the slides start sliding. Any idea how I can fix?

Answer 1

If your first image is not loaded yet when you call .start() such that currentslide.width() isn't correct, then it won't set the proper initial value for left upon initialization. You may need to set a .load() event handler so you know when that first slide is loaded and you can wait for it to be loaded before starting the slideshow.

When testing this, you must set the .load() handler before the .src value is set on the image object (or you may miss the load event in IE) and you should make sure you test both the cases where no images are cached and where all images are cached (as the timing of the load event can be different in both cases).