如何在JavaScript中用精灵替换直接图像调用？

Question

前段时间我在网上买了一个画廊脚本。在那些日子里，我从来没有听说过'太多的http请求'，更不用说'精灵'和他们提高速度的能力了！我猜也是原作者，对sprites不熟悉......现在我想要为我的网站定制该脚本，并通过sptires更改所有png加载的实例。我知道如何在CSS中做到这一点，背景位置偏移，但不知道如何使它在JavaScript中发生。

我的问题是： 1）如何从直接url http://.../etc.png转换成精灵加载PNG？ 2）看起来像PNG在下面没有被一致地提及。当从单个精灵中获得一致时，我该如何处理这个问题？ 非常感谢！任何帮助，让我去是非常感激。

进行自我提醒：在整个脚本PNG的所有发生的历史实例：

LINE|====================IMAGE=================================================== 
118 | $mainImg = $("<img id='main-img' src='http:///spacer.png'/>"); 
135 | var $backBtn = $("<img src='" + LIGHTBOX_PATH + "prev.png' id='back-btn'/>"); 
138 | var $fwdBtn = $("<img src='" + LIGHTBOX_PATH + "next.png' id='fwd-btn'/>"); 
141 | var $closeBtn = $("<img src='" + LIGHTBOX_PATH + "close.png' id='close-btn'/>"); 
150 | $playBtn.attr("src", "http:///pause.png"); 
153 | $playBtn.attr("src", "http:///play.png"); 
163 | $textBtn = $("<img src='" + LIGHTBOX_PATH + "info.png' id='txt-btn'/>"); 
229 | $(this).attr("src", "http:///spacer.png"); 
303 | .attr("src","http:////spacer.png").animate({opacity:1}, tranSpeed, startTimer); 
353 | $playBtn.attr("src", "http:///pause.png"); 
357 | $playBtn.attr("src", "http:///play.png"); 
776 | $prevBtn.css({"background-image":"url(http:///prev.png)", 
779 | $nextBtn.css({"background-image":"url(http:///next.png)", 

Answer 1

上述所有引用的：

1. 给他们，你可以参考CSS唯一的类名。
2. 在新的CSS类中给每个图像定义一个高度和宽度。确认一切看起来应该如此。当您更改图像以获得背景图像时，就会发生这种情况，因此图像边界不会有渗色。
3. 将image标签的src更改为1x1透明gif/png文件。

对于上述1中定义的每个CSS类：

1. 变化的背景网址作为新的精灵。
2. 将background-repeat更改为no-repeat。
3. 更改背景位置以引用图像在您的精灵中的位置。

注意：这些类一般可以使用sprite creator程序为您创建。 （http://spritegen.website-performance.org/）

如果一切顺利：

1. 您所有的图像标签应该有你的1x1像素透明图像的SRC。
2. 所有的图片标签都应该有一个独特的CSS类，它具有指定的background-url，background-position和background-repeat。
3. 您的网站应该看起来完全一样。