從縮放圖像獲取寬度

Question

一旦將圖像附加到正文中，我就使用Jquery來獲取圖像的寬度。 看看這個小提琴 ，以了解我在做什么。

我想要做的是添加每個元素的高度受限制，並在縮放后讀取各自的寬度。 您將看到的問題是console.log給我的寬度值為0。

Answer 1

使用jQuery .load()函數在圖像加載后執行所有計算：

var number = 0;

$(document).ready(function(){
    setInterval(function(){
        console.log();
        $('.container').prepend(
          $('<img/>').attr({
           src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
           id:'img' + (number++)
}).load(function(){
 console.log($(this).width())
})
    },3000);
});​

Answer 2

http://jsfiddle.net/w7rcn/

在完全下載圖像之前，正在“讀取”寬度。

因此，我們使用了相同的概念，但是在觸發img load事件之后應用了它：

 $('#img' + String(number)).load(function() {
            console.log($(this).width());
        });

Answer 3

莫森和正義是正確的。 但是，您仍然可以簡化一下：

var number = 0;
$(document).ready(function(){
    setInterval(function(){
        console.log();
        $('.container').prepend($('<img '
                + 'id="img'+number+'"src="http://www.upress.umn.edu/'
                + 'book-division/images-1/other-'
                + 'images/blockc.gif/image_thumb">').load(function() {
            console.log($(this).width());            
        }));
        number++;
    }, 3000);
});​