0

我正在尝试制作一个像这样http://learnlakenona.com/的病态滑块

但是我在 chrome 中遇到了主要的性能问题（似乎他们的网站甚至没有在 chrome 上运行滑块）。我通过在 div 上使用 background-image CSS 来显示图像，将它们添加为 img 标签会导致更多延迟。

我禁用了所有 javascript，并注意到我仍然会因为有一些巨大的图像坐在彼此之上而变得滞后。

这里只是坐在那里的一些图像。尝试更改面板的大小，重新绘制图像将其锁定。（有时它运行得很好，这很奇怪） http://jsfiddle.net/LRynj/2/

有谁知道如何在这样的滑块上获得可接受的性能！？（图片需要很大）

4

2 回答 2

4

通过在图像编辑器中调整它们的大小或降低质量来优化您的图像资源。

您还可以在线使用免费工具：

http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/

于 2012-06-16T17:59:37.517 回答
2

该网站使用巨大的透明 PNG 来实现视差效果，因此：

  • 您必须减少图像的总重量：如果还没有这些 PNG，您可以尝试将它们转换为 PNG-8。量化算法等在将图像减少到 256 种颜色方面做得非常好，而且质量没有太多下降。
  • 您必须保持视差效果的透明度。两种类型的透明度都与 PNG-8 兼容：每个像素上的类似 GIF 的不透明/透明位透明度和类似“PNG-32”的（PNG-24 + 8 位透明度），其中每个像素具有 256 级透明度。Adobe Fireworks 尤其擅长创建这样的“PNG-8+alpha”图像；转换器也存在，但它们并不完美（取决于您的图像）。
  • 加载立即可见的图像的最小部分，然后再加载 9600 像素宽（！）的其余部分，将大大减少首次查看的时间。您可以通过将图像按 1920 或 2560 像素的块切片来实现这一点，将 3 个图像的查看部分加载为背景图像，并通过仅在 DOM准备好加载所有其他部分后执行的脚本来实现。没有太多的部分，因为这意味着要下载更多的资产，但仍然不是 4MB 精灵 :) 奖励：通过将 3 张图像切片为 PNG-8，每个 PNG 将有自己的 256 色调色板，整体质量会更好（不是与 PNG-24 一样完美，但比单个 9600 像素的 PNG-8 更好，后者总共只能使用 256 种颜色。在一个 PNG 中为男士西装提供更多的灰色阴影，为球棒分子提供更多闪亮的颜色等

编辑：永远不要尝试在智能手机上加载它！我确实喜欢媒体查询并避免 UA 检测，因为它大部分时间都不需要并且永远不会完美，但这是受欢迎的情况之一（选择加载 8MB 图像）......忽略不这样做的用户没有光纤并且不会等待您的网站显示是与您的问题无关的另一个问题。

于 2012-06-16T20:35:48.740 回答