javascript - 带有百分比的图像大小会减慢网站速度

Question

有点连线，但这就是问题所在。我有 jQuery 动画和许多其他事件，当我的 css 文件中图像宽度和高度以像素为单位时可以正常工作，但是当我将它们设置为百分比或自动时(高度:100%；宽度:自动；-> 我需要什么它是)，我的整个网站变慢了。事件不会立即触发，而且我的动画一点也不流畅(我只看到 2 或 3 帧的动画)。任何想法可能是什么问题或如何解决？

我的动画示例(左右是 div):

  $("#left").animate({"width":"+=15%"},"linear");
  $("#right").animate({"width":"+=15%"},"linear");

CSS:

 img {
   height: 100%;
   width: auto;
 }

Answer 1

每当我在使用动画时遇到网站性能问题时，它们几乎总是涉及图像太大。当您使用百分比调整大小时，可能不会立即明显看出您的图像比需要的大得多。

平均桌面屏幕尺寸现在是 1366×768，这意味着对于大多数网站来说，全屏画廊的最大图像宽度/高度应该是 1366/768 (如果这些图像用作图标/缩略图，显然更少)。

在开发人员面板中检查您的图像的原始尺寸，并确保它们不超过这些尺寸:这很可能会解决您的性能问题。