如何在加載之前獲取圖像的寬度和高度？

我想知道是否有可能在加載之前獲取圖像的大小（寬度和高度）？不幸的是，我不能使用這樣的代碼：如何在加載之前獲取圖像的寬度和高度？

$('img').load(function() { 
    alert(this.width + ' ' + this.height); 
});

而圖像加載我等不及了，我需要在beggining知道圖像的大小。

是否可以或應該使用例如PHP和getimagesize（）函數並將其傳遞給HTML？

來源

2011-11-05 pronngo

爲什麼你需要知道圖像加載之前的尺寸？有些東西告訴我有一個更好的方法（比如將頁面預先緩存在頁面外），但這取決於你實際要做什麼。 –

你不能。瀏覽器在加載之前不會報告圖像的尺寸。你必須得到服務器端的信息，或者改變你的方法，所以在加載之前你不需要知道。

如果你只需要知道圖像的大小，你把它放在網頁（而不是從字面上你加載它之前），你可以這樣做：

img = new Image(); 
img.onload = function() { 
    // Here, you can reliably use `width` and `height` 
    display("Loaded, size is " + this.width + "x" + this.height); 
}; 
img.src = "the/path/to/the/image/goes/here";

Live example

這是重要的是在之前勾選load事件設置src，以防圖像在緩存中並且事件立即觸發。

（我不主張使用DOM0風格處理像onload，但他們在簡單的例子是有用的。）

來源

2011-11-05 13:20:20

我想不出任何真正的理由，爲什麼你不能加載您的圖像，然後才被放置在文件中以確定高度。您可以等待，直到圖像加載完畢。如果你不能那麼你完全設計你的應用程序錯誤。（以一種非判斷性的方式:)）

來源

2011-11-05 13:22:33 Layke

引用的代碼不可靠。在查詢其大小之前，您必須先加載圖像。 –

啊耶。好點子。編輯刪除錯誤。 – Layke

要在砌體網格佈局的屏幕上顯示太多圖像，所以只能在達到某個區域時執行重載。真正？ – cregox

如何在加載之前獲取圖像的寬度和高度？

回答

相關問題