鉻上的jquery.css問題

我有一個腳本，用一些背景圖像創建div，然後移動它們，它在所有其他瀏覽器上運行良好，但鉻卻太滯後了。我檢查我的代碼，我發現當我刪除以下代碼時，它在Chrome上也很棒。鉻上的jquery.css問題

//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。

來源

2011-12-09 Malixxl

你嘗試了很明顯的：

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

來源

2011-12-09 19:49:38 adeneo

我試過這個，即使我在我的樣式表中設置了背景大小，它仍然會導致滯後，如果不設置任何背景大小，它的效果很好。但我需要適合圖像到div，所以我需要改變背景大小。 – Malixxl

@Malixxl - 在Chrome瀏覽器幫助論壇中似乎存在一些背景大小問題，尤其是「封面」問題。看起來這些主要是關於慢速滾動，但總體來看，Chrome似乎與這種類型的CSS有一些問題。我編輯了我的anwer以包含將圖像作爲img標籤添加的方式，這應該在大多數情況下起作用，這取決於該元素其餘部分的佈局。 – adeneo

我已經把圖像放在一個div中，並將主div的marginTop設置爲動畫，我更新了我的問題並添加了jsfiddle url，在chrome和其他瀏覽器上試用，只有chrome滯後，我認爲它可以是關於chrome和大圖片顯示。 – Malixxl

background-size是一個CSS3屬性，所以它可能會對瀏覽器的速度產生更大的影響。

我可能會建議使用<div>中的圖像來提高速度。

來源

2011-12-09 18:11:20 Blender

我刪除背景的大小，我只剩下「背景：‘URL（’ + imageSrc +「）」「部分.css函數它仍然laggy，但如果我刪除此部分並從樣式表設置背景圖像，沒有滯後。所以我不認爲它是關於背景大小的。 – Malixxl

然後你可以將CSS移動到樣式表中嗎？ – Blender

我將代碼更改爲背景中的圖像，但它仍然存在相同的問題，我使用jsfiddle鏈接更新了我的問題，您可以在其中看到簡單版本的代碼。 Chrome也因此而滯後。 – Malixxl

鉻上的jquery.css問題

回答

相關問題