Question

我有一张背景图片，1000x666px，只有93kb。我使用它作为背景图像，使用以下代码：

url(/Optimized-image1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

当我将此图像设置为背景时，我的jquery效果非常慢且根本不光滑。我的谷歌地图的东西也是如此。

当我将背景设置为白色或任何其他颜色时，它都很流畅，所以我认为我的CSS代码并不是那么好。

我试图用javascript预加载图像，但这并不好。 base64也无法正常工作。

任何提示？

Answer 1

似乎background-size: cover;表现不佳，至少在Chrome中表现不佳。

请参阅Poor performance of Chrome using background-size: cover

以下是替代解决方案列表http://css-tricks.com/perfect-full-page-background-image/

Answer 2

首先，您可以使用SMush It优化图片。您还可以使用Clean CSS优化所有CSS文件。

如果你想在图片上“sm”你的图像，你可以使用Smush It，仍然可以。

1）用户将上传图片
2）获取新上传图片的网址（$ imgurl）
3）提出要求 http://www.smushit.com/ysmush.it/ws.php?img=$imgurl并得到它内容（它是JSON）到$content
4）使用$ newimage = json_decode（$ content）;
5）您的新优化图片的网址为$newimage->dest下载并使用它：）

Answer 3

您是否尝试使用z-index对图像和dom对象进行分层，以确保它们不会竞争资源？

优化images / css以提高速度性能

3 个答案: