图像大小与百分比减慢网站

Image size with percentage slows down site

本文关键字：网站 百分比 图像      更新时间：2023-09-26

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

动画的例子(左边和右边是div): 

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

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

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

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

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

相关文章：