Подтвердить что ты не робот

Гладкость прохождения различается между divs

Я использую react-swipeable-views в моем проекте, чтобы включить события сенсорного салфетки. Я могу провести между разными div, которые находятся внутри <SwipeableViews/>. У меня есть три разных div, из которых в первом div у меня есть список изображений. В остальных двух остальных divs ничего нет.

export default class Photos extends React.Component {
    render() {
        const styles = {
          slide: {
            padding: '15px',
            minHeight: '500px',
            color: '#fff',
          },
          slide1: {
            background: '#FEA900',
            overflowY: 'hidden'
          },
          slide2: {
            background: '#B3DC4A',
          },
          slide3: {
            background: '#6AC0FF',
          }
        }

        return(
            <div id="profile_photos">

               <div id="profile_photos_nav">
                   <span class="photo_nav" id="photo_timeline">
                       <button class="active_btn">Timeline Photos</button>
                    </span>
                   <span class="photo_nav" id="photo_profile">
                       <button>Profile Photos</button>
                   </span>
                   <span class="clear_both"></span>
               </div>

               <SwipeableViews>
                    <div style={Object.assign({}, styles.slide, styles.slide1)}>
                        <img src="img/img3.jpg"/>
                        <img src="img/img5.jpg"/>
                        <img src="img/img6.jpg"/>
                        <img src="img/img7.jpg"/>
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide2)}>
                        slide n°2
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide3)}>
                      slide n°3
                    </div>
                </SwipeableViews>

            </div>
        );
    }
}

Однако прокрутка между slide2 и slide3 очень плавная. Но при прокрутке между slide1 и slide2, это немного отрывистое и негладное. И когда я проверяю хром-консоль, я получаю эту ошибку:

Отложенная задача с большим сроком действия, чтобы улучшить гладкость прокрутки. См. Crbug.com/574343.

: 3000/#/profile/photos? _k = 4qkf5g: 1

Если я удалю изображения из первого div, он будет работать очень плавно снова. Что я могу сделать, чтобы сгладить прокрутку (имея изображения в 1-м div) между 1-м и 2-м диванами? Пожалуйста, помогите мне.

4b9b3361

Ответ 2

Если это имеет какое-то отношение к движку рендеринга, вы можете запустить GPU, который быстрее, чем CPU, применяя какое-то преобразование css (например, rotate(0.00001deg)) до начала скольжения слайда, а затем удалите преобразование в салфетка сделано.

Кстати, я не знаю, повысит ли это ваш слайдер, но стоит попробовать.