クロムのJquery .css問題

Question

私はいくつかの背景イメージでdivを作成し、それらを移動するスクリプトを持っています。他のすべてのブラウザではうまく動作しますが、クロムはあまりにも遅いです。私は自分のコードをチェックして、次のコードを削除すると、それもクロームでうまく動作することがわかります。

//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要素で画像を使用します私のアニメーションのために、私はdivsが必要です。

Answer 1

あなたは明白なことをしようとしました：

$("#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タグとしてそれを追加しようとすることができ： 『URL（：

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); 

Answer 2

background-sizeはCSS3プロパティなので、ブラウザの速度に大きな影響を与える可能性があります。

<div>の画像を使用することをお勧めします。