Question

我正在编写一个使用web-transitions滑动图像的轮播脚本。

这是一个非常简化的小提琴，它是如何工作的。 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);

简而言之，这就是脚本的工作原理：

活动图像在视图中（给定类“活动”）。所有其他图像（没有类“活动”）都在屏幕外（顶部：9999px）。
下一张图像移动到活动图像旁边以准备过渡。
更改了活动图像和下一个图像类，这会触发两个图像同时从左向右滑动。
在转换结束时，活动图像位于屏幕外。

提前致谢。

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

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

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

上面的小提琴只是简单地显示了屏幕上的所有元素，你可以看到一旦元素丢失了prev类并且活动它就会丢失背景图像。这意味着屏幕上的图像越少，嘿，你不应该经历所有这些额外的延迟。

您可能已经找到了另一种解决方案，但这是一个值得注意的方法。也适用于响应式布局。

关于如何在我的旋转木马中避免代价高昂重绘的建议？

1 个答案: