Question

i have a script that creates divs with some background image then moves them, it runs great on all other browsers but chrome has is too laggy. I check my codes and i see that when i remove following codes, it works great on chrome too.

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

}

a simple version of my codes on jsfiddle: http://jsfiddle.net/uUj4h/2/ (may take a min to load cause of big images)

if i can’t find a solution, i will use images in a div instead of background but for my animation but i need divs.

Answer 1

Did you try the obvious:

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

and just setting background-size in your css.

Fiddle : http://jsfiddle.net/adeneo/6TeBk/2/

Or you could try just appending it as an img tag to the start of your element:

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