Cambia dinamicamente l'immagine src usando Jquery che non funziona in IE e firefox

Question

Sto implementando un captcha per un'email. quando si fa clic sul pulsante linkEmail si apre la modal di email. lì devo impostare l'immagine captcha generata da un gestore (CaptchaGenerator.ashx) con un clic del pulsante clic su linkEmail. Ecco il codice per questo.

$(".linkEmail").click(function() { 
    //Load captcha image 
    $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx'); 
    $('#emailModal').modal(); 
}); 

Sopra codice sta funzionando benissimo in crome, ma non funziona in IE e Firefox. Anche se ho provato i seguenti, non c'è fortuna.

HTML:

<p id="captchacontainerp" class="captchacontainer"></p> 
------------------------------------------------------------- 
$('#captchacontainerp').prepend($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>")); 
------------------------------------------------------------- 
var img = $('<img id="imCaptcha" class="imgCaptcha">'); 
img.attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx'); 
$('#captchacontainerp').empty(); 
img.appendTo('#captchacontainerp'); 
--------------------------------------------------------------- 
$('#captchacontainerp').empty(); 
$('#captchacontainerp').append($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>")); 

Answer 1

IE cache tutti otteniamo richiesta, in modo da aggiungere un timestamp alla vostra richiesta di URL per esempio:

$(".linkEmail").click(function() { 
    //Load captcha image 
    $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx?'+new Date().getTime()); 
    $('#emailModal').modal(); 
}); 

Answer 2

Hai provato impostando l'attributo src per '' prima di cambiare di nuovo ? Inoltre, quali sono le impostazioni di caching che si sta utilizzando (sia a livello locale, e sul server)

Answer 3

se si specifica qualsiasi stile in linea di attributo, altezza o larghezza simile,

<img src="themes/images/01.png" height="100" width="100" /> 
<img src="themes/images/01.png" style="height:100px; width=100px;" /> 

poi la prima rimuoverla e prova ancora.

Anche se si specifica esternamente stile utilizzando tag di stile,

#imageId{ 
    height : 100px; 
    width : 100px; 
    } 

poi anche prima rimuoverlo e provare. Dopo aver rimosso l'attributo di stile dalle immagini, verrà visualizzata l'immagine.

L'attributo di altezza può funzionare con IE ma l'attributo di larghezza non funziona.

Se la soluzione di cui sopra non funziona, allora: A volte i file PNG non vengono visualizzati. Quindi prova a usare la loro immagine JPG.

Answer 4

Ho avuto lo stesso problema durante il tentativo di richiamare il pulsante re captcha. Dopo qualche ricerca, ora la funzione funziona bene in quasi tutti i famosi browser (Chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) { 
    $.get(theUrl, function(data, status){}); 
    document.getElementById("captcha-img").src = ""; 
    setTimeout(function(){ 
    document.getElementById("captcha-img").src = "captcha?"+new Date().getTime(); 
    }, 0); 
} 

'Theurl' utilizzata per il rendering nuova immagine captcha e può essere ignorato nel tuo caso. Il punto più importante è la generazione di un nuovo URL che costringe FF e IE a rieseguire l'immagine.