छवि इनपुट लोड हो रहा है

Question

मैं इस कोड का उपयोग किया गया था का पता लगाने:

<input type="image" ... onLoad="this.style.opacity = 1" /> 

यह IE में ठीक काम करता है (कम से कम, संस्करणों का समर्थन करने वाले opacity: पी) लेकिन क्रोम में onLoad ईवेंट सक्रिय नहीं था, जब छवि लोड ।

ध्यान दें कि इनपुट के src विशेषता को बदल सकते हैं, और जब यह करता है कुछ जावास्क्रिप्ट opacity 0 करने के लिए सेट के पहले, और उपयुक्त transition गुण यह देखने के लिए की तरह छवि फ़ेड आउट और नया एक में fades हैं। इसके अलावा, उपयोग <input type="image"> की आवश्यकता है क्योंकि सर्वर को निर्देशांक की आवश्यकता है।

मैं एक बिल्कुल-तैनात <img>onLoad और opacity, <input> है कि अब एक पारदर्शी GIF पिक्सेल का उपयोग करता है के पीछे रखा लेने का उपयोग कर जेरी-धांधली पास है। हालांकि यह काम करता है, यह बदसूरत है।

क्या क्रोम में <input> में उपयोग की गई छवि की सफल लोडिंग का पता लगाने का कोई तरीका है, या यह background-image, ज्ञानी नहीं है?

संपादित करें: मामले में यह मदद करता है, यहाँ एक Fiddle

Answer 1

आप अपने इनपुट के एक संदर्भ के साथ addEventListener() विधि का उपयोग कर सकते हैं।

ध्यान दें कि ईवेंट श्रोता को इनपुट में जोड़ने से पहले आपको पृष्ठ को लोड करने की आवश्यकता होगी, ऐसा करने के लिए, विंडो ऑब्जेक्ट के लिए बस एक और ईवेंट श्रोता लागू करें और फिर अपने इनपुट को संदर्भित करने वाले अपने फ़ंक्शन को आग लगें।

Answer 2

मुझे याद है कि मैं अतीत में इस तरह की समस्या में भाग गया था। आप निम्न कार्य करके यह पता लगा सकते:

window.onload = function(){ 
    var input = document.getElementById('input1'); 
    input.src=''; 
    input.addEventListener('load', loadImage, false); 
    input.src = 'http://theoffguard.net/wp-content/upLoads/2012/04/Nick-Cage.jpg'; 
} 

function loadImage() 
{ 
    console.log("Image is loaded"); 
} 

डेमो: http://jsbin.com/ufovom/9/edit

आशा इस मदद करता है!

Answer 3

यह एक हैक की तरह है, लेकिन आप Javascript Image वस्तु का दृष्टांत कर सकते हैं, और फिर उस पर घटना श्रोता सेट और फिर इनपुट के स्रोत सेट इसके पूर्ण होने पर लोड हो रहा है:

http://jsfiddle.net/t8n4y/

अस्वीकरण:

<input type="image" id="imgInput" /> 

जावास्क्रिप्ट: केवल क्रोम पर

एचटीएमएल परीक्षण किया

var photo = document.getElementById('imgInput'); 
      var img = new Image(); 
      img.addEventListener('load', function() { alert("done loading"); }, false); 
      img.src = 'http://jeremydouglass.com/gamertextually/images/gt_snowflake_tags-2-ach-large.png?ran=' + Math.random(); 
      photo.src = img.src; 

Answer 4

<input id="image" type="image" ... onLoad="this.style.opacity = 1" /> 

    //script -> 

    $("#image").change(function() { 
       if (this.files && this.files[0]) { 
       var FR = new FileReader(); 
       FR.onload = function (e) { 
        //your onload 
       }; 
       FR.readAsDataURL(input.files[0]); 
      } 
});