Рекомендации о том, как избежать дорогостоящей перерисовки в моей карусели?

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. Активное изображение в поле зрения (данный класс «активный»). Все остальные изображения (без класса «active») находятся вне экрана (вверху: 9999 пикселей).
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'); } 

В приведенной выше скрипке я только что бросил вместе быстрый слайд-шоу, главное, чтобы заметить, что в CSS фоновых изображения, не применяются, если ни одного класса активных или пред настоящее.

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

выше скрипка просто показывает все элементы на экране, вы можете увидеть, как только элемент теряет класс пред и активным он теряет фоновое изображение. Это означает, что на экране больше изображений, и вы не должны испытывать лишний лаг.

Возможно, вы уже нашли другое решение, но это удобный метод, который следует иметь в виду. Также хорошо работает с гибкими макетами.