如何從onload保存圖像的寬度和高度？

我有一個<li>元素的數組，我試圖將其製作爲一個旋轉木馬，只是我希望圖像的大小超過640x480以及居中框架。如何從onload保存圖像的寬度和高度？

我有以下代碼： HTML：

<ul id="carousel">  
    <li><img src="pic1.jpg" /><p><b>2012</b> something</p></li> 
    <li><img src="pic2.jpg" /><p><b>2016</b> something else.</p></li> 
</ul>

JQuery的：

var imW=[]; 
var imH=[]; 
//... 
$('li',obj).each(function(index){ 
    itemSources.push($(this).find('img').attr('src'));     
    var img = $(this).find('img'); 
    imW.push(img.width()); 
    imH.push(img.height()); 
});

然後我用itemSources[i]，imW[i]和imH[i]來調整圖片的大小，並添加任何必要的填充，以居中的框架。

這工作正常，只要我的互聯網速度足夠快，並在計算大小之前加載圖像。（哈！）

我知道我想是這樣的：

var img = new Image(); 
img.onload = function() { 
    console.log(this.width + 'x' + this.height); 
}; 
img.src = $(this).find('img').attr('src');

但我不能保存寬度和高度，因爲只是推到陣列失控的範圍，所以沒有創造外部回調那。如何將這些容易打印到控制檯的尺寸保存到我的imW和imH數組中？

來源

2016-02-03 adinutzyc21

將這些值放入數組後需要做什麼？ – gurvinder372

你可以基本上設置一個圖像的屬性，像'data-loaded =「true」'一旦圖像被加載，當最後一個圖像加載時，你可以迭代圖像並加載數組 – gurvinder372

我使用它們時我渲染旋轉木馬來調整圖像大小並添加填充（左/上），以便如果其中一個圖像尺寸較小，圖像將顯示居中。 – adinutzyc21

一旦加載圖像基本上你可以設置像data-loaded="true"圖像的屬性，東西和最後的圖像加載時，你就可以遍歷圖像和加載陣列

在你onload方法，做以下更改

var img = new Image(); 
img.onload = function() { 
    console.log(this.width + 'x' + this.height); 

    //set this attribute to indicate that this image has been loaded already 
    $(this).attr("data-loaded", "true"); 

    //check if all images have this attribute 
    if ($("img[data-loaded='true']").size() == $("img").size()) 
    { 
     //now iterate the images to load your array 
    } 
}; 
img.src = $(this).find('img').attr('src');

來源

2016-02-03 06:41:36 gurvinder372

我無法得到這個工作，最終只是等待所有的圖像加載之前加載窗口與$（窗口）.on（「負載」，函數（）{'，雖然這是顯而易見的東西正在發生... – adinutzyc21

如何從onload保存圖像的寬度和高度？

回答

相關問題