jQuery: नई छवि डोम को जोड़ा गया हमेशा के बाद लोड

Question

मैं एक छवि के आयाम प्राप्त करने के लिए, एक डायनामिक रूप से तैयार छवि टैग का उपयोग कर की जरूरत है चौड़ाई 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 

तो मैं छवि उत्पन्न, यह डोम में जोड़ने और हैंडलर समारोह को परिभाषित जब छवि लोड किया जाता है कहा जाता है। मैं इसे बंद करने के भीतर "स्वयं" नामक मूल वस्तु का संदर्भ देने के लिए बंद करने का उपयोग कर रहा हूं। मैं यह सुनिश्चित करने के लिए छवि के यूआरएल को डंप कर रहा हूं कि संदर्भ ठीक है। आउटपुट है:

pic.jpg 
0 
0 
0px 

अब यहाँ अजीब बात है: ('चौड़ाई') यदि मैं ऊपर (appendTo) दूसरी पंक्ति को हटा दें, तो यह अचानक काम करता है, लेकिन केवल attr के लिए:

pic.jpg 
1024 
0 
0px 

यह व्यवहार मुझे कोई समझ नहीं आता है। मैं उपरोक्त सभी छह मामलों में वास्तविक छवि आकार प्राप्त करने की उम्मीद करूंगा। मुझे पता है कि समस्या के आसपास कैसे काम करना है, लेकिन मैं समझना चाहता हूं कि ऐसा क्यों होता है। क्या यह एक बग है? या इसके लिए कुछ तार्किक कारण है?

ऊपर दिए गए परिणामों सफारी के लिए कर रहे हैं। मैंने अभी क्रोम के साथ परीक्षण किया है और मुझे पहले उदाहरण में सभी सही मान मिल गए हैं, लेकिन फिर भी दूसरे उदाहरण में दो शून्य हैं। बहुत अजीब।

Answer 1

मैं सफारी के लिए एक विश्वसनीय समाधान नहीं मिला:

• छवि
• संलग्न लोड() हैंडलर
• केवल उसके बाद, src विशेषता निर्धारित बनाएं !!

मैं अभी भी समझ में नहीं क्यों चौड़ाई कभी शून्य लौटना चाहिए, लेकिन ऐसा लगता है कि यदि आप केवल src सेट करने के बाद लोड हैंडलर देते अप्रत्याशित बातें होती हैं। मुझे यह विचार केवल इसलिए मिला क्योंकि मुझे आईई के साथ एक और समस्या का सामना करना पड़ा (जिसने लोड हैंडलर को भी फोन नहीं किया क्योंकि यह माना जाता है कि हैंडलर संलग्न होने से पहले लोड की गई छवि), इसलिए मैंने जो सबक सीखा है वह हमेशा चीजों को करना है ऊपर वर्णित आदेश।

Answer 2

मुझे ऐसा लगता है कि जिस तरह से आप jQuery वस्तु बताए जाते हैं और फिर छवि पर लोड फ़ंक्शन को कॉल एक से अधिक को मार है, जो यह मुश्किल देखने के लिए क्यों jQuery इस प्रकार से व्यवहार हो सकता है बनाता का एक सा है।

इस प्रयास करें:

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

निर्माण पूरी तरह से मुझे बस इसे पाने के लिए के बाद छवि डोम में इंजेक्ट किया जाता।

आप भी इस कोशिश कर सकते:

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()); 

Answer 3

मैं अपने बंद करने मनचाहे तरीके से काम कर रहा है नहीं लगता है। आप की तरह कुछ करने की कोशिश की है:

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')); 
}); 

Answer 4

फ़ायरबग और क्रोम में अपने कोड की कोशिश की और यह उम्मीद के रूप में व्यवहार: 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)); 

निम्नलिखित मिला क्रोम में व्यवहार को पुन: पेश करने में सक्षम हूं, लेकिन मुझे यह अजीब नहीं लगता है। width() "प्रदर्शित" तत्व के लिए वास्तविक चौड़ाई की गणना कर रहा है - उदा। हर बार जब आप एक छिपे हुए div में छवि डालते हैं तो यह == 0 होगा!

साथ appendTo लाइन की जगह की कोशिश के बाद और आप मिल जाएगा एक ही:

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

अद्यतन:

सफारी 3.1.2 से परिणाम मेरे लिए बिल्कुल एक ही कार्य कर रहे हैं डोम के रूप में जोड़े जाने पर क्रोम के रूप में।

img डोम में सम्मिलित नहीं किया जाता है तो मैं भी स्वीकार्य (कोई weirdness) परिणाम हो रही है:

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

मुझे विश्वास है वहाँ अपने स्थापना के लिए कुछ अद्वितीय होना चाहिए हूँ ... या यह एक है सफारी @ मैक ओएसएक्स बग (विंडोज एनवी पर सफारी की कोशिश की)।