jquery - 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 标签要慢吗？:contain 值是否会在每次滚动时重新计算并减慢速度？

score 1 · Accepted Answer

问题是，当使用background-size浏览器时，实际上并没有缓存图像，所以在每次事件之后，比如用某些东西覆盖图像等，它必须再次渲染它——对于更大的图像，它会产生明显的延迟

score 0 · Accepted Answer

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

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

2 回答 2