Question

我刚刚赢得了一个“遗留”的sitebuild项目，我需要修复一些问题。有一个部分像画廊一样工作。每张图片都是背景图片（有很多图片）。当用户向下滚动时，您可以看到，糟糕的浏览器正在尝试向用户显示内容，但无法跟上手指快的用户。

以下是一些非常漂亮的 html

int value is abcdef78
1st byte is 0x78 addr is 0x7ffdda43fc8c
2nd byte is 0xEF addr is 0x7ffdda43fc8d
3rd byte is 0xCD addr is 0x7ffdda43fc8e
4th byte is 0xAB addr is 0x7ffdda43fc8f

这里有一些样式：

<section class="gallery">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="columns-content">
                    <a href="imageurl1">
                        <div class="image-content" style="background-image('img1.png')"></div>
                    </a>
                    <a href="imageurl2">
                        <div class="image-content" style="background-image('img2.png')"></div>
                    </a>
                   <!-- there are 30 more images like that -->
                </div>
            </div>
        </div>
    </div>
</section>

我的问题：有没有办法阻止这些图像重新粉刷？我尝试了.image-content{ background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 20vw; display: inline-block; position: relative; vertical-align: bottom; margin: 0px; }和transform: translateZ(0);技巧，但没有一个能为我工作。我应该放弃并开始在角落里哭泣我是多么无用吗？

干杯！

Answer 1

您可以尝试一些方法来改善（和伪造）性能。

降低img分辨率
使用visibility: hidden和/或display:none（下面的进一步说明）
使用占位符至少向“快速用户”显示内容，以便他们现在正在加载网页（这是假的方法）

因此，对于数字2，您可以使用EventListener来捕获用户滚动并根据用户位置隐藏/显示内容。

请注意，如果您从display: none切换为display: block，则会发生reflow。从visibility: hidden切换为visibility: visible只会导致repaint

请查看this question。

PS：另一种（完全不同的）方法是从infinite scrolling更改为multi-page网络。看看这是否符合您的要求。

防止在移动设备上重新绘制背景图像

1 个答案: