Question

使用移动设备滚动浏览我网站上的某个区域时，它会明显滞后。

此部分上有几张图像，因此我尝试将图像的大小减小到最低的可接受大小，并将它们全部制成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，滞后的部分是投资组合部分。

所有图像都在10kb-20kb之间

这在任何台式机或笔记本电脑上都可以正常工作，但在移动设备上确实滞后。需要明确的是，加载时间很好。只是笨拙的滚动。

移动设备上的滚动滞后

0 个答案: