jQuery：添加到DOM的新圖像在加載後總是具有寬度0

我需要使用動態創建的圖像標記獲取圖像的尺寸。有用。但只使用attr（'width'），只有當我不把圖像添加到DOM。否則，返回的尺寸爲零。爲什麼？ :)jQuery：添加到DOM的新圖像在加載後總是具有寬度0

this.img = $('<img/>', {'src': e.url});   // generate image 
this.img.appendTo('body');       // add to DOM 
this.img.load(function(self){return function(){ // when loaded call function 
    console.log(self.img.attr('src')); 
    console.log(self.img.attr('width')); 
    console.log(self.img.width()); 
    console.log(self.img.css('width')); 
}; }(this));          // pass object via closure

所以我生成圖像，將其添加到DOM，並定義一個處理函數加載圖像時被調用。我正在使用閉包來傳遞它對原始對象的引用，在閉包中稱爲「self」。我正在傾倒圖片的網址以確保引用無誤。輸出是：

pic.jpg 
0 
0 
0px

現在這裏是奇怪的事情：如果我刪除上方（appendTo）的第二行，然後它突然的作品，但僅限於ATTR（「寬」）：

pic.jpg 
1024 
0 
0px

這種行爲對我沒有任何意義。我期望在以上所有六種情況下獲得實際的圖像大小。我現在知道如何解決這個問題，但我想知道爲什麼會發生這種情況。這是一個錯誤嗎？還是有一些合乎邏輯的原因呢？

以上結果適用於Safari。我只用Chrome進行了測試，在第一個例子中我得到了所有正確的值，但在第二個例子中仍然是兩個零。很奇怪。

來源

2010-12-07 travelboy

你確定你總是有e.url有效的嗎？ – kobe 2010-12-07 23:52:02

@travel男孩你可以給這個變量一些其他的名字，而不是img this.img，this.newImgSource左右...... /// – kobe 2010-12-08 00:02:10

@travelboy＆gov：同意，應該改變圖像的jQuery對象的屬性因爲img是標籤名稱，只是良好的做法。 – UpHelix 2010-12-08 00:27:26

我找到了Safari瀏覽器的可靠解決方案：

創建圖像
連接負載（）處理
只有在這之後，設置src屬性！

我仍然不明白爲什麼寬度應該返回零，但似乎意想不到的事情發生，如果您只在設置src後附加負載處理程序。我只是因爲我遇到了IE的另一個問題（它甚至沒有調用負載處理程序，因爲它認爲在處理程序被附加之前加載的圖像），所以我學到的教訓是總是在如上所述。

來源

2010-12-11 03:37:54 travelboy

在我看來，你分配jQuery對象，然後調用圖像上的加載函數的方式有點過分殺，這使得很難看出爲什麼jQuery可能會這樣做。

試試這個：

this.img = $('<img />').attr('src', e.url).appendTo('body'); 
console.log('width: ' + this.img.width());

完美的作品對我來說，只是把它的形象被注入到DOM之後。

你也可以試試這個：

this.img = $('<img />').attr('src', e.url).css({ 
    'width': 'auto', 
    'height': 'auto' 
}).appendTo('body'); 
console.log('width: ' + this.img.width()); 
console.log('height: ' + this.img.height());

來源

2010-12-08 00:14:42 UpHelix

我不認爲你的閉合工作，你想要的方式。你有沒有嘗試過這樣的：

this.img.load(function(){       // when loaded call function 
    console.log(this.attr('src')); 
    console.log(this.attr('width')); 
    console.log(this.width()); 
    console.log(this.css('width')); 
});

來源

2010-12-08 01:16:15 jabbie

試圖放火和鉻你的代碼，並將其行爲與預期相同：去除appendTo()線之後我

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif 
215 
215 
215px

：

var src = 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'; 

this.img = $('<img/>', { 'src': src }); 
this.img.appendTo('body');       // add to DOM 
this.img.load(function(self){return function(){ // when loaded call function 
    console.log(self.img.attr('src')); 
    console.log(self.img.attr('width')); 
    console.log(self.img.width()); 
    console.log(self.img.css('width')); 
}; }(this));

得到以下能夠重現Chrome中的行爲，但我不覺得奇怪。 width()正在計算「顯示」元素的實際寬度 - 例如每次你把圖像放在一個隱藏的div中，它將會是== 0！

嘗試更換appendTo線以下，你會得到相同的：

this.img.appendTo($('<div/>').css('display', 'none'));

UPDATE：

從Safari瀏覽器3.1.2結果行事對我來說完全一樣作爲Chrome添加到DOM時。

IMG時沒有插入到DOM，我也越來越可以接受的（沒有的怪事）結果：

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif 
215 
0 
0px

我相信一定有什麼獨特的你設置...或者它是一個Safari @ Mac OSX錯誤（在Windows環境下嘗試Safari）。

來源

2010-12-10 17:11:47 kares

jQuery：添加到DOM的新圖像在加載後總是具有寬度0

回答

相關問題