javascript - 这个图像在客户端是如何切片的？

Question

当您通常在 Web 浏览器中的网页上显示的图像上单击鼠标右键时，您会看到一个上下文菜单，其中有一个菜单项“将图像另存为”。

但是，如果您在某些网站上右键单击某些图片，上下文菜单不会显示表明该图片是一张图片的项目。相反，它显示“查看背景图像”。

如果您查看背景图片，会发现 Web 应用程序缓存了一张合成图片，然后可能在客户端将该图片切片并切 block 为单独的标签。

例如，如果您转到 Stack Exchange 的 Writers 网站上的任何线程，例如:

https://writers.stackexchange.com/questions/3102/how-can-i-make-a-story-bigger

然后右键单击 facebook 图标并查看背景图片，您会得到这张图片:

http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2

类似地，如果您访问具有 shareThis 小部件的网站，如下所示:

http://sathyaish.net/

在最右上角，有这个 shareThis widget 图片。如果您右键单击该图像并查看背景图像，它看起来像这样:

http://w.sharethis.com/share4x/images/service-icons-sprite.png

1) 我想知道使用什么技术来实现这一点，我该如何学习？

2)其次，我如何擅长JavaScript？我如何学习所有这些技巧？我应该开始阅读哪些书可以让我擅长 JavaScript？

Answer 1

在两个图片网址中看到“sprite”这个词了吗？这就是你looking for .

遗憾的是，该技术通常用于内容图像——将性能置于正确的 HTML 之上。