chrome上的Jquery .css问题

Question

我有一个脚本可以创建带有一些背景图像的 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。

Answer 1

background-size 是一个 CSS3 属性，因此它可能会对浏览器的速度产生更大的影响。

我可能会建议使用 <div> 中的图像以提高速度。

Answer 2

你有没有尝试过显而易见的：

$("#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);