CSS背景图像效果jQuery性能如何？

Question

我有一个大约10,000像素宽的页面。

当用户滚动页面时，从右向左移动，给出水平滚动。

我的页面上有多个div，每个div都有一个背景图像，每个div都设置了背景大小，以便图像相应地缩放每个div的高度。

.examplediv {
    background-image:url('myimage.jpg');
    background-size:contain;
    height:80%; 
    width:200px;
}

我的页面相对平滑地向上滚动，直到它到达Id具有.examplediv的点，然后它开始抖动/加速。

我要问的是，有没有人遇到过此问题，是否在css中加载图像比在标记中留下空div标签要慢？是：包含重新计算每个滚动的值并减慢它的速度？

Answer 1

问题在于，当使用background-size时，浏览器实际上不会缓存图像，所以在每次事件之后都要用某些东西覆盖图像，它必须再次渲染它 - 使用更大的图像它会显示滞后

编辑：这是类似问题的Poor performance of Chrome using background-size: cover

Answer 2

我会确保所有图像都不比实际需要的大。此外，在Photoshop中，您可以将Web的质量设置得相当低。

在photoshop中使用save for web，你可以在2up视图中同时看到新旧图像。