javascript - 使用 jquery 设置 css 的问题

Question

我用 jquery 创建了一个幻灯片。它在容器中克隆一个图像，将其向右移动，然后向左滑动并重新开始。这是代码:

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

可以在此处找到查看此操作的链接: https://dustinhendricks.com/breastfest/public_html/

如您所见，我遇到的问题是，当我调用 css('left', x);< 时，第一次添加到 dom 时，第二张幻灯片似乎没有向右移动。然而，在第一个 jQuery 动画之后，每个克隆的幻灯片似乎都可以通过该调用向右移动，没问题。这让我相信 jquery 的 animate 正在设置允许对象通过 css('left', x); 移动的东西，但它会改变什么？位置已设置为绝对位置。

这就是为什么我的示例页面在幻灯片开始滑动之前似乎需要一段时间。知道我该如何解决吗？

Answer 1

如果当您调用 .start() 时您的第一张图片还没有加载，那么 currentslide.width() 不正确，那么它不会设置初始化时 left 的正确初始值。您可能需要设置一个 .load() 事件处理程序，以便您知道何时加载了第一张幻灯片，并且您可以在开始幻灯片放映之前等待它加载。

测试这个时，你必须在图像对象上设置 .src 值之前设置 .load() 处理程序(否则你可能会错过IE)，你应该确保你测试了没有图像被缓存的情况和所有图像被缓存的情况(因为在这两种情况下加载事件的时间可能不同)。