크롬에서 Jquery .css 문제

Question

일부 배경 이미지로 div를 만든 다음 다른 모든 이미지에서 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가 필요합니다.

Answer 1

는 명백한 시도했다.

바이올린 : 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> 내의 이미지를 사용하는 것이 좋습니다.

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

을하고 당신의 CSS에서 배경 크기를 설정 :