动态 CSS Sprite 注入

Question

所以这个问题的标题可能有点模糊，所以我会尽量简单地解释一下。

我在 .NET 中创建了一个动态图像精灵控件来获取任意数量的图像并将它们转换为图像精灵。例如：

Image 1 = /images/img1.jpg
Image 2 = /images/img2.jpg
Image 3 - /images/img3.jpg

.NET 然后获取这些图像并通过使用 url 在服务器上创建一个精灵并作为一个图像（精灵）返回：

/DynamicSprite.ashx/?image=/images/img1.jpg&image=/images/img2.jpg&image=/images/img3.jpg

我正在使用 XML 和 jQuery 来查找所有图像的来源并将它们注入到 url 字符串中。

我的问题是如何在 js 中使这个动态化，这样无论我有多少图像，js 都会即时创建我需要的 sprite url 字符串。

所以，如果有 7 个图像，上面的 url 将有 7 个图像 url 注入其中以创建我的图像精灵。

一个粗略的 jQuery 示例来帮助你：

var imageSrc = $('div a');    
var imageArray = ['image1', 'image2', 'image3', 'image4', 'image5', 'image6' , 'image7'];
imageSrc.css('background', 'url(\'/DynamicSprite.ashx/\')');

这里会发生什么：'url(\'/DynamicSprite.ashx/\')' 这样?image= 和&image= 字符串会根据数组中有多少项以及如何使用索引而不是手动设置位置来获取该信息，即：imageArray[0]

Answer 1

我想我明白你想要什么，但我不确定。所以这是一种制作图像src数组的方法 然后从他们那里输出一个背景网址

//the element to add the bg to
var imgSrc = $("div a");

//the elements to loop through
var imgLoop = $("img");

//create our array
var srcArray = new Array();

//loop through the elements
imgLoop.each(function(i){

    //grab the src of the elements
    var src = $(this).attr("src");

    //put the src into our array
    srcArray[i] = "image="+src+"&";

});

//collapse the array to a string
var images = srcArray.join("");

//set the bg image url
var bgUrl = "DynamicSprite.ashx?"+images;

//add the background
imgSrc.css("background","url("+bgUrl+")");

希望这会有所帮助。 :)