Javascript計算圖像大小，在圖像加載後

function loader(img) { 
     var imgH = img.height; 
     var imgW = img.width; 
     console.log(imgH, imgW);  
    }; 

img = new Image(); 
img.src ='../images/pic1.jpeg'; 
img.onLoad = loader(img);

所以，它是exertain，我會得到圖像的大小，但我在控制檯中得到「0 0」。和圖像的大小是500X700。這段代碼有什麼問題？Javascript計算圖像大小，在圖像加載後

來源

2011-09-01 Olga

這是沒有意義的：

img.onLoad = loader(img);

要實際功能傳遞給事件：

img.onload = loader;

和函數中使用this代替img。

您還需要在之前分配事件更改圖像的src屬性。

另請注意，圖像上的加載事件有許多問題。從加載事件的jQuery manual on load():

注意事項與圖像一起使用時

開發嘗試使用.load要解決的共同挑戰（）快捷方式是執行一個功能時的圖像（或圖像的集合）已完全加載。有幾個已知的警告與此應該注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的

它不正確的WebKit如果圖像的src設置爲相同的SRC像以前

它不火正確地泡了DOM樹

來源

2011-09-01 08:20:02

試試這個：

function loader(){ 
    var imgH = this.height; 
    var imgW = this.width; 
    console.log(imgH, imgW); 
} 
var img = new Image(); 
img.onload = loader; 
img.src ='../images/pic1.jpeg';

來源

2011-09-01 09:06:28 Ingemar

我用這種方式：

img.onload = function(){//here wrote everything from loader};

而這是我發現的唯一的工作解決方案。

來源

2011-09-06 04:11:23 Olga

我發現最好的辦法就是讓電腦先做縮放。

並在正文中聲明onload =「some_function（）」。

<body onload="some_function()">

然後在腳本中獲得大小。

some_function(){ 

var image1 = document.getElementsByClassName('main')[0]; 
var computedStyle_image1 = window.getComputedStyle(image1); 
var image_width = computedStyle_image1.getPropertyValue('width'); 

}

我與谷歌瀏覽發現你需要確保你打電話身體DIV否則圖像值arn't設置內的onload =「功能」，它拉動0像素的寬度和高度。

來源

2014-01-04 09:02:53

Javascript計算圖像大小，在圖像加載後

回答

相關問題