javascript - 如何读取图像的块？

Question

许多网站都使用这种技术（facebook、google 也是如此）

例如，打开 facebook.com

保存此页面（不是 *.MHTM，而是带有图像的 HTML）（意思是登录页面）

它节省：

facebook_files（目录） facebook.html（文件）

然后在文件夹中，您可以看到一个包含页面所有主要图像的 GIF 文件。

问题是：如何读取一个文件中的许多块？以及如何调用这种方法？

Answer 1

这些图像被称为“精灵”。看看这篇关于它们的文章。

基本思想是，每当您想使用精灵中的图像时，您都有一个元素，它只显示大精灵图像的一部分。因此，您页面中的每个“图像”实际上都是div以该图像为背景的，只是进行了偏移，以使右侧部分显示出来。

主要优点是您的页面需要更少的请求，因此加载速度更快。

网上有一些工具可以让使用精灵更容易。我没有使用过任何一个，所以不能推荐一个，但是使用一个工具可以为你节省很多工作。

Answer 2

这就是你所说的“精灵”，就像街机游戏中使用的精灵（一个角色的不同位置的图像）。基本上它是包含较小图像的一大块图像。

这种方法的优点是，您只需请求一个包含这 100 个 gif 的巨大图像，而不是 100 个不同的 HTTP 请求对 100 个小 gif（这会导致开销）。然后不是使用<img>每个图像，而是使用 CSS background，然后使用background-position“通过”容器对齐正确的图像以显示正确的图像。