这个图像是如何在客户端切片的?

时间:2011-06-15 15:32:11

标签: javascript client-side

当您通常右键单击Web浏览器内网页上显示的图像时,会出现一个上下文菜单,其中包含“将图像另存为”菜单项。

但是,如果右键单击某些网站上的某些图像,则上下文菜单不会显示指示图像为一个图像的项目。相反,它显示“查看背景图像”。

如果您查看背景图像,则表明Web应用程序有一个已缓存的合成图像,然后可能在客户端,它将图像切片并切成单独的标记。

例如,如果你去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/

在极右上角,有这个小部件的这个小部件图像。如果右键单击该图像并查看背景图像,则如下所示:

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

1)我想知道用什么技术来实现这一目标,我该如何学习呢?

2)其次,我如何擅长JavaScript?我如何学习所有这些技巧?我应该开始阅读哪些书籍才能使我擅长JavaScript?

2 个答案:

答案 0 :(得分:2)

在两个图片网址中看到“精灵”一词?这就是你looking for

可悲的是,该技术通常用于内容图像 - 将性能置于正确的HTML之上。

答案 1 :(得分:2)

虽然您可以获得有关CSS Sprites的一般教程(如Quentin指出的那样),但您可能还需要查看GWT ImageBundle Design doc,其中详细说明了该想法如何合并到Google Web Toolkit中