为什么Chrome加载许多(≈130)png图像时这么慢？

Question

我正在制作一个展示各种产品的页面/应用程序.一个视图包含大约130个产品的阵容,由png图像表示的eash,大小从33Kb到150Kb不等.

可以使用用户滚动条或自定义控制器水平滚动阵容,当您悬停每个产品时,我使用som css-transistions淡出除了悬停的所有产品,并放大它.

只要我保持图像倒计时,它在Safari和体面的Firefox以及Chrome中都能非常流畅.但是我试图添加的图像越多,滚动和转换都会逐渐变慢,直到它几乎无法使用.

这是chrome中的一些cache.problem吗？它有什么办法吗？

我试图预加载图像,但问题不在于图像的加载时间,它的性能似乎因图像的数量而停止.

Answer 1

您可以将所有小图像合并到一张大图像中，并仅加载大图像，因此您只需执行一个 HTTP 请求。为了显示，您必须使用 css 设置每个图像的偏移量（背景位置属性）。