关于如何避免在我的旋转木马中进行昂贵的重绘的建议？

Question

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

这是一个关于它如何工作的真正简化的小提琴。 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. 活动图像在视图中（给定类“活动”）。所有其他图像（没有“活动”类）都在屏幕外（顶部：9999 像素）。
2. 下一张图片移动到活动图片旁边，为过渡做准备。
3. 活动图像类和下一个图像类已更改，这会触发两者同时从左向右滑动。

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

   提前致谢。

Answer 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 的类并且活动它失去了背景图像。这意味着屏幕上的图像更少，而且您不应该遇到所有额外的延迟。

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