Запаздывание прокрутки на мобильных устройствах - PullRequest
0 голосов
/ 14 июня 2019

Пролистывая какой-то раздел на моем сайте с помощью мобильного устройства, он заметно отстает.

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

Раздел, который запаздывает, построен из шаблона в javascript, вот разметка:

function sendTemplates(data) {
    let markUp = [];
    data.forEach((el) => {
        function checkLive(el) {
            if(el.isLive === true) {
                return `
                <a href="${el.liveLink}" class="card__btn-live" target="_blank">See Live &rarr;</a>
                `
            } else{ return `
            <button href="" class="card__btn-live card__btn-live--disabled">See Live &rarr;</button>
            <label class="card__label" for="card__btn">Currenctly not hosted online &otimes;</label>
            `
            }
        }
        markUp.push(
            `<div class="card card-fade">
                <!-- front of card -->
                <div class="card__side card__side--front">
                    <!-- front img -->
                    <img  src="./images/project/${el.image}-small.jpg"
                        alt="Project ${el.name} example image" class="card__img">

                    <h4 class="card__name card__name--front">${el.name}</h4>
                </div>

                <!-- Back of card -->
                <div class="card__side card__side--back">
                    <h4 class="card__name card__name--back">${el.name}</h4>
                    <p class="card__paragraph">${el.text}</p>

                    ${checkLive(el)}
                </div>
            </div>
        </div>`)
    });

и вот сайт: http://www.find -talie.com , отстающий раздел - это раздел портфолио.

все изображения от 10 до 20 КБ

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

...