jquery - Chrome上的jQuery .css问题

我有一个脚本，该脚本使用一些背景图像创建div，然后将其移动，它在所有其他浏览器上运行都很好，但是chrome太慢了。我检查了我的代码，发现当我删除以下代码时，它在chrome上也很好用。

//imageCount = count of image placed for animation, this loop gets source of
//each image, create divs, then makes each image to background of a div

for(imageNum=0;imageNum<imageCount;imageNum++)
{
var imageSrc= $("#image img:eq("+imageNum+")").attr("src");

 //save image sources for later use
images.push(imageSrc);

 //creating divs
$("#main_cont").append("<div name=img"+imageNum+" class=img_cont></div>");


  //here is my problem
//when i delete .css part works great

$("#main_cont .img_cont:eq("+imageNum+")").width(tWidth).height(tHeight).css({
    backgroundImage: "url("+imageSrc+")",
    backgroundRepeat: "no-repeat",
    backgroundSize: tWidth +"px "+ tHeight +"px "

});


  //this part is not about my question, each div's position for animation
var offset = $("#main_cont .img_cont:eq("+imageNum+")").offset();

yPos.push(offset.top);
xPos.push(offset.left);

}

我在jsfiddle上的代码的简单版本：http://jsfiddle.net/uUj4h/2/（加载大图像的原因可能要花一点时间）

如果我找不到解决方案，我将在div中使用图像而不是背景，但对于动画，我需要使用div。

最佳答案

您是否尝试过显而易见的方法：

$("#main_cont .img_cont:eq("+imageNum+")").css({
    width: tWidth,
    height: tHeight,
    background: "url("+imageSrc+") no-repeat top left"
});

并在CSS中设置背景尺寸。

小提琴：http://jsfiddle.net/adeneo/6TeBk/2/

或者，您可以尝试将其作为img标签附加到元素的开头：

var imageSrc = new Image();
    imageSrc.src = $("#image img:eq("+imageNum+")").attr("src");
    imageSrc.width = tWidth;
    imageSrc.height = tHeight;

$("#main_cont .img_cont:eq("+imageNum+")").css({ width: tWidth, height: tHeight}).append(imageSrc);

关于jquery - Chrome上的jQuery .css问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8449822/