2

我正在编写一个轮播脚本，该脚本使用网络转换来滑动图像。

这是一个非常简化的关于它如何工作的小提琴。 http://jsfiddle.net/tUhZe/6/

我想知道是否有人可以对如何减少每次过渡开始时发生的昂贵重绘有任何好主意？

我尝试将 50 张图片添加到此轮播中，但它导致了性能上的重大问题。

    window.setInterval( function () {
        var element = $('#container'),
            active = $('.active'),
            next = active.next('.slide');
        if (!next.length) {
            next = element.find('.slide:eq(0)');
        }

        // Move next image into position, ready to slide
        next.addClass('next');

        // Slight delay for next image to move into position
        window.setTimeout( function () {
            // Start moving active image out
            active.addClass('prev');

            // Start moving next image in
            next.addClass('active')
                .removeClass('next')
                .bind('webkitTransitionEnd', function () {

                    next.unbind('webkitTransitionEnd');

                    // Move offscreen
                    active.removeClass('active prev next');

                    // Reassign active
                    active = next;
                });
        }, 100);

    }, 2000);

简而言之，这就是脚本的工作方式：

  1. 活动图像在视图中（给定类“活动”）。所有其他图像（没有“活动”类）都在屏幕外（顶部：9999px）。
  2. 下一个图像移动到活动图像旁边，为过渡做准备。
  3. 活动图像类和下一个图像类被更改，这会触发两者同时从左向右滑动。

  4. 在过渡结束时，活动图像位于屏幕外。

    提前致谢。

4

1 回答 1

1

可悲的事实是，许多浏览器/计算机硬件组合还没有完全准备好一次将 50 个全屏图像加载到窗口中。

但是我最近构建了一个类似的轮播，发现通过巧妙地使用背景图像和简单的逻辑可以完全避免性能问题。

当屏幕上有太多图像被隐藏或以其他方式显示时，浏览器会出现问题吗？因此，因此，如果我们简单地使用带有背景图像的 span，这些背景图像仅在包含 的元素处于活动状态或前/后元素时才加载。

我不太会说话，所以让我告诉你；

http://jsfiddle.net/DUWMy/

<div class="slideshow">

    <span class="image-1 active"></span>
    <span class="image-2"></span>
    <span class="image-3 prev"></span> 

</div>



.slideshow .prev.image-1,
.slideshow .active.image-1{ background-image:url('http://lorempixel.com/output/technics-q-c-400-300-7.jpg'); }
.slideshow .prev.image-2,
.slideshow .active.image-2{ background-image:url('http://lorempixel.com/output/nightlife-q-c-400-300-5.jpg'); }
.slideshow .prev.image-3,
.slideshow .active.image-3{ background-image:url('http://lorempixel.com/output/city-q-c-400-300-7.jpg'); }

在上面的小提琴中，我刚刚制作了一个快速幻灯片，需要注意的重要一点是，在 css 中，除非存在 active 或 prev 类，否则不会应用背景图像。

http://jsfiddle.net/DUWMy/1/

上面的小提琴简单地显示了屏幕上的所有元素，你可以看到一旦一个元素失去了 prev 类并激活它就会失去背景图像。这意味着屏幕上的图像更少，而且您不应该遇到所有额外的延迟。

您可能已经找到了另一种解决方案，但请记住这是一种方便的方法。也适用于响应式布局。

于 2013-04-09T22:51:08.927 回答