जावास्क्रिप्ट क्रॉसब्रोसर नई छवि()

Question

इस फ़ंक्शन में क्या गलत है? यह ओपेरा और Firefox में काम करता है, लेकिन Windows

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {}; 
} 

तहत सफारी पर काम doens't जब मैं getImage कोशिश ('http://site.com/someservlet.gif') इस छवि को लोड नहीं है (क्योंकि someservlet.gif लॉग सभी अनुरोधों) यह ओपेरा और फ़ायरफ़ॉक्स में काम करता है, लेकिन सफारी में नहीं। मैंने "नई छवि()" और "document.createElement ('img')" - एक ही परिणाम की कोशिश की।

========== अद्यतन: समारोह में अच्छी तरह से काम करता है जब यह सीधे कहा जाता है, समस्या शुरू जब यह घटना श्रोता से कहा जाता है

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a> 

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a> 

<script type="text/javascript"> 
function getImage(url) { 
    var image = document.createElement('img'); 
    alert('1'); 
    image.onload = function() {alert(image.src);}; 
    image.src = url; 
    alert('2'); 
} 
</script> 

"स्थानीय" लिंक अच्छी तरह से फ़ायरफ़ॉक्स, ओपेरा में काम करता है और सफारी (लेकिन सफारी चेतावनी 1, चेतावनी 2 दिखाता है और फिर किसी कारण से "src" के साथ चेतावनी देता है, जबकि अन्य ब्राउज़र चेतावनी 1, चेतावनी एसआरसी, चेतावनी 2)

"google" लिंक ओपेरा, फ़ायरफ़ॉक्स - अच्छी तरह से काम करता है (चेतावनी 1, चेतावनी एसआरसी, अलर्ट 2), लेकिन सफारी नहीं - चेतावनी एसआरसी दिखाओ। सफारी में आप सतर्क 1, सतर्क 2 और सब कुछ देखते हैं। जब कोई सफारी से "google" लिंक पर क्लिक करता है तो सर्वलेट "/pic/img.gif" अनुरोध नहीं मिलता है।

समस्या क्या है, इसे हल करने का तरीका क्या है?

धन्यवाद।

Answer 1

मेरी पहली धारणा है कि आप ब्राउज़रों में कुछ अनुकूलन कोड है कि छवियों कि प्रदर्शित नहीं होते हैं की लोडिंग defers पर ठोकर खाई है। अब तक:

सफारी 4.0.2 (530.19.1): मेरे लिए

• काम करता है, के रूप में वर्णित (दोनों को स्थानीय, गूगल, और अपना माउस ले जब मैं ईवेंट परिवर्तित)
• के आदेश के रूप में वर्णित
  • काम करता है: अलर्ट alert1, alertsrc, है alert2

  फ़ायरफ़ॉक्स रात (3.5.3pre, 20,090,805)। मजेदार, क्योंकि यह पहले काम नहीं करता था। छवि को अपने कैश में लोड करने का प्रयास करें, देखें कि यह परीक्षण को प्रभावित करता है या नहीं।

• अलर्ट के आदेश alert1 है, और फिर alertsrc और alert2 एक ही समय में (संवाद के लिए कदम दोनों को देखने के लिए)

गूगल क्रोम (2.0.172।39):

• सफारी में के रूप में काम करता है, माउसओवर भी कई घटनाओं आग
• अलर्ट के आदेश alert1, alert2 है, alertsrc

इंटरनेट एक्सप्लोरर (7.0.6001.18000)

लगता है हालांकि

• काम करता है के रूप में वर्णित (दोनों को स्थानीय, गूगल, और जब अपना माउस ले करने के लिए बदल)
• अलर्ट के आदेश alert1, alertsrc, है alert2

ध्यान रखें कि मैंने छवि स्थान को http://www.google.com.ar/images/nav_logo6.png पर बदल दिया है क्योंकि मेरे पास अभी एक यादृच्छिक छवि स्क्रिप्ट नहीं चल रही है। इस पर आधारित, मैं अलग-अलग छवियों के साथ स्वयं परीक्षण करने का सुझाव दूंगा, और आपके कैश में मौजूद छवियों, छवियों को अपने कैश में छवियों का प्रयास करने का सुझाव दूंगा।

कारण चेतावनी जरूरी नहीं है कि अलग-अलग ब्राउज़र विभिन्न ऑर्डर में छवियों को लोड करते हैं, और अलर्ट्रैक केवल छवि लोड होने के बाद ही होता है। एक अच्छी जांच अगर कोई छवि लोड हो या नहीं तो चौड़ाई 0 है।

Answer 2

आईई और सफारी में इस उदाहरण को आजमाएं, और पूरी तरह से काम करता है।

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {alert('ok');}; 
} 
getImage("http://www.google.com.ar/images/nav_logo6.png"); 

Answer 3

एक ही रास्ता मैं यह IE में काम करने के लिए नहीं मिल सकता हैनई छवि() बल्कि से document.createElement उपयोग करने के लिए किया गया था। यही कारण है कि अपने ऑनलोड समारोह के बाद करने के लिए image.src ले जाकर सुधारी जा सकने वाली थी:

image.onload = function() {} 
image.src = url; 

Answer 4

मुझे लगता है कि यह एक कैश समस्या है।
जब आप कहते हैं कि image.src = url; जावास्क्रिप्ट तुरंत छवि लाने के लिए जाता है, और यदि छवि कैश की जाती है, तो ब्राउजर केवल कैश किए गए एक का उपयोग करेगा और ऑनलोड को फायर करेगा, और अब आप image.onload = function() {}; कहते हैं लेकिन ऑनलोड पहले से ही निकाल दिया गया है, इसलिए function() कभी नहीं है बुलाया।

वैसे भी, यह सब सिर्फ मेरी अटकलें है, मुझे यकीन नहीं है कि मैं सही हूं या नहीं। हालांकि, अगर मैं सही हूं, तो image.src = url;image.onload = function() {};