jquery - 防止在移动设备上重绘背景图像

Question

我刚刚赢得了一个“遗留”站点构建元素，我需要修复一些问题。有一个部分像画廊一样工作。每张图片都是背景图片(有很多)。当用户向下滚动时，您可以看到，糟糕的浏览器试图向用户显示内容，但跟不上手指快的用户。

这是一些漂亮的 html

<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); 和 will-change: transform; 技巧，但它们都不适合我。我应该退出并开始在 Angular 落里哭泣我是多么没用吗？

干杯!

Answer 1

您可以尝试一些方法来提高(和模拟)性能。

1. 降低img分辨率
2. 使用visibility: hidden 和/或display:none(下面有进一步的解释)
3. 使用占位符至少向“手指快的用户”显示一些内容，以便他们知道网络正在加载(这是虚假的方法)

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

Please note that if you switch from display: none to say display: block a reflow will occur. Switching from visibility: hidden to visibility: visible will only cause a repaint

请看this question .

PS:另一种(完全不同的)方法是将 infinite scrolling 更改为 multi-page web。看看这是否符合您的要求。