当您通常右键单击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://w.sharethis.com/share4x/images/service-icons-sprite.png
1)我想知道用什么技术来实现这一目标,我该如何学习呢?
2)其次,我如何擅长JavaScript?我如何学习所有这些技巧?我应该开始阅读哪些书籍才能使我擅长JavaScript?
答案 0 :(得分:2)
在两个图片网址中看到“精灵”一词?这就是你looking for。
可悲的是,该技术通常用于内容图像 - 将性能置于正确的HTML之上。
答案 1 :(得分:2)
虽然您可以获得有关CSS Sprites的一般教程(如Quentin指出的那样),但您可能还需要查看GWT ImageBundle Design doc,其中详细说明了该想法如何合并到Google Web Toolkit中