jquery - 动态 CSS Sprite 注入(inject)

Question

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

我在 .NET 中创建了一个动态图像 sprite 控件，可以拍摄任意数量的图像并将它们转换为图像 sprite。例如:

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

.NET 然后获取这些图像并通过使用 url 在服务器上创建一个 sprite 并作为一个图像(sprite)返回:

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

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

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

因此，如果有 7 张图片，上面的 url 将有 7 个图片 url 注入(inject)其中以创建我的图片 sprite。

一个粗略的 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

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

//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+")");

希望这对您有所帮助。 :)