JavaScript圖片調整緩慢

我正在處理的網站有很多從數據庫中提取的圖像。圖像的尺寸不一致，我試圖在統一大小的盒子（div）中顯示它們。我不知道任何圖像的尺寸，但我可以檢索它們：JavaScript圖片調整緩慢

document.getElementById(myImage).width 
document.getElementById(myImage).height

這個我做我的測試，看看如何調整圖片以適應統一的盒子之後。最後，我設置與效果：

document.getElementById(myImage).width = theNewWidth 
document.getElementById(myImage).height = theNewHeight

此功能僅在img標籤使用onload="resizingFunction(imgId);"每叫一次圖像。數據庫中的每個圖像都需要大約1-2秒才能完成此功能，並且再也不會爲這些圖像運行該功能。儘管從未再次運行，但如果使用此功能，網站運行速度會明顯變慢。谷歌搜索後，我嘗試添加：

document.getElementById(myImage).removeAttribute("width") 
document.getElementById(myImage).removeAttribute("height")

在設置新的寬度和高度之前。這確實提高了速度，但仍然比我沒有調整圖像大小時慢。再次，爲了澄清，每個圖像在被加載一次後調整大小，但由於某種原因，這仍然會減慢網站的速度。

圖像是通過將PHP回顯到JavaScript創建的。這是必要的，因爲他們需要來自數據庫（PHP）的信息，JavaScript將它們放在正確的盒子（div）中。以下是圖像的代碼創建：

echo "\t\t\tdocument.getElementById('gBox".$i."').innerHTML = '<img onload=\"image_applyToGrid(".$i.");\" id=\"img".$i."\" style=\"left:0; top:0;\" src=\"'+gBoxes[".$i."].imgPath+'\"/>';\n";

下面是影像縮放功能調用圖像的onload一次：

function image_applyToGrid(inId) { 
inIdImage = document.getElementById("img"+inId); 
var imgW = inIdImage.width; 
var imgH = inIdImage.height; 
if (imgW > imgH) { 
    var proportions = imgW/imgH; 
    imgH = gridUnit; 
    imgW = gridUnit*proportions; 
    inIdImage.style.left = -((imgW-gridUnit)>>1)+"px"; 
} 
else { 
    var proportions = imgH/imgW; 
    imgW = gridUnit; 
    imgH = gridUnit*proportions; 
    inIdImage.style.top = -((imgH-gridUnit)>>1)+"px"; 
} 
inIdImage.removeAttribute("width"); 
inIdImage.removeAttribute("height"); 
inIdImage.width = imgW; 
inIdImage.height = imgH; 
}

來源

2012-10-12 asimes

你爲什麼不調整在服務器端的圖像？加載許多大圖像會影響性能。你說這個函數永遠不會再運行一個圖像，但它看起來總是在頁面加載時運行，它似乎並沒有改變圖像的實際大小並將其存儲在某個地方。 –

您是否嘗試過使用CSS解決方案？有一個容器包裝圖像設置他們都css的'max-width'和'max-height'屬性？ – VKen

您可以通過PHP提供圖像，並在URL中包含一個額外的大小參數。如果存在這種尺寸的圖像，請提供。如果沒有，請加載原始圖像，調整其大小並存儲調整後的版本。這不應該太複雜... –

使用Javascript調整圖像大小通常不是一個理想的方法。您正在消耗所有帶寬，以便通過網絡發送全尺寸圖像，然後縮小它們。更好的方法是從圖像存儲中提取圖像並調整服務器端的大小。然後將結果存儲在服務器端緩存中，以便您可以爲所有客戶端請求提供優化的圖像。在這裏不需要考慮緩存的概念，在這種情況下，它可以像數據庫中的目錄或新列一樣簡單。（FWIW，我寧願不存儲在數據庫中的二進制數據，但是這可能是另一個討論）

參見：http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/

來源

2012-10-12 17:08:51

我會盡力，謝謝 – asimes

的圖像可能是太大了。我會建議準備用於網絡使用的圖像。谷歌「優化圖像的網絡」的一些想法如何做到這一點。

來源

2012-10-12 17:04:26

不幸的是沒有一個選項。而且，大多數圖像都非常小，因爲它們很老。大多數圖像小於150x150，這是我按比例擴展它們（隱藏突出框的部分，溢出：隱藏）。 – asimes

採用全尺寸圖像並以不同尺寸加載整個圖像是一種不好的做法。考慮讓縮略圖生成並放置在頁面上。

如果您的2500x2500圖像只是將高度和寬度設置爲500x500，則整個2500x2500圖像仍然需要加載。

來源

2012-10-12 17:06:24 dgarbacz

這是一般情況下相反的問題。大多數圖像太小，我想擴大它們至少150x150（隱藏溢出的圖像部分：如果不是正方形，則隱藏）。 – asimes

JavaScript圖片調整緩慢

回答

相關問題