richiamata carico su immagine non chiamata in ie8

Question

Sto provando a precaricare l'immagine e impostare l'altezza e la larghezza in un contenitore.

Il problema sembra essere con la memorizzazione nella cache in ie8 poiché non riesce a caricare gli aggiornamenti successivi.

Ho cercato e ho provato più soluzioni ma sembra che niente funzioni, almeno non in modo coerente.

corrente Javascript:

img = new Image(); 
    img.src = '/images/site/image.jpg'; 
    img.onload=function(){ 
     var width = img.width + 'px'; 
     var height = img.height + 'px'; 

     $('#container').css({'width':width, 
          'height':height 
     }); 
    }; 

Tutti i suggerimenti sono apprezzati, grazie.

Answer 1

È necessario impostare la richiamata onload prima di impostare src.

Quando l'immagine viene memorizzata nella cache, il callback onload non viene chiamato con il codice poiché l'evento load viene prodotto prima che sia impostata la richiamata.

fare questo:

img = new Image(); 
img.onload=function(){ 
    var width = img.width + 'px'; 
    var height = img.height + 'px'; 

    $('#container').css({'width':width, 
         'height':height 
    }); 
}; 
img.src = '/images/site/image.jpg'; 

Answer 2

Questo è il modo ritardato IE7 e IE8 sono, anche dopo aver impostato lo src dopo l'evento onload, il listener di eventi manca ancora.

Controlla questo, questo è quello che dovevo fare per uno dei miei progetti - pronto per questo? SetTimeout. Sì! È così che devi ritardare a scrivere il tuo codice per far sì che le cose "funzionino", ad esempio.

myImage.onload = doSomething; 

var slowMeDown = setTimeout(function(){ 
         myImage.src = "img/somePic.jpg"; 
       },300); 

Un-fottuta-credibile ....