关于如何避免在我的旋转木马上进行昂贵的重新喷漆的建议

Question

我正在编写一个旋转木马脚本，该脚本使用web转换来滑动图像。

这里有一个非常简单的小提琴如何工作。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);

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

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

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

   提前谢谢。

Answer 1

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

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

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

我不善言辞，让我给你看看；

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

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

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

上面的fiddle简单地显示了屏幕上的所有元素，你可以看到只要一个元素失去了prev的类，激活了它就会失去背景图像。这意味着屏幕上的图像更少，嘿，你不应该经历所有额外的滞后。

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