Rileva ingresso immagine caricamento

Question

stavo usando questo codice:

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

Funziona bene in IE (almeno, le versioni che supportano opacity: p), ma in Chrome caso onLoad non ha fuoco quando l'immagine caricata .

Nota che l'attributo src dell'ingresso può cambiare, e quando lo fa un po 'di JavaScript imposta il opacity-0 prima, e adatti transition proprietà far sembrare l'immagine svanisce e la nuova svanisce. Inoltre, l'uso di <input type="image"> è necessario perché il server ha bisogno delle coordinate.

devo jerry-truccato utilizzando una posizione assoluta <img> prendendo il onLoad e opacity, posto dietro la <input> che ora utilizza un pixel GIF trasparente. Mentre funziona, è brutto.

C'è un modo per rilevare il caricamento corretto di un'immagine utilizzata in un <input> in Chrome, o è simile a background-image, non rilevabile?

EDIT: In caso aiuta, ecco una Fiddle

Answer 1

È possibile utilizzare il metodo addEventListener() con un riferimento del vostro input.

Si noti che prima di aggiungere il listener di eventi all'input è necessario caricare la pagina, per farlo basta applicare un altro listener di eventi per l'oggetto finestra e quindi attivare la funzione che fa riferimento all'input.

Answer 2

Mi ricordo che mi sono imbattuto in un problema come questo in passato. È possibile rilevare facendo quanto segue:

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

DEMO: http://jsbin.com/ufovom/9/edit

Spero che questo aiuti!

Answer 3

Questa è una sorta di un hack, ma è possibile creare un'istanza di un Image oggetto Javascript, e quindi impostare il listener di eventi su questo e quindi impostare lo src dell'ingresso di carico quando è fatto:

http://jsfiddle.net/t8n4y/

Diniego: testato solo su Chrome

HTML:

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

Javascript:

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