Dynamicznie zmieniaj obraz src, używając Jquery nie działa w IE i firefox

Question

Wprowadzam captcha dla wiadomości e-mail. po kliknięciu na przycisk modemu e-mail linkEmail otworzy się modalny. tam muszę ustawić obraz captcha wygenerowany przez handler (CaptchaGenerator.ashx) po kliknięciu przycisku linkEmail. Oto kod dla tego.

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

Powyższy kod działa dobrze w CROME ale nie działa w IE i Firefox. Chociaż próbowałem pójść w ślady, nie ma szczęścia.

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 buforowanie wszystko żądanie GET, więc dodać znacznik czasu na żądanie URL np

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

Answer 2

Czy próbowali ustawiając atrybut SRC '' przed zmieniając go ponownie ? także, jakie są ustawienia buforowania używasz (zarówno lokalnie, jak i na serwerze)

Answer 3

Jeśli podasz dowolny styl inline atrybutu, wysokość lub szerokość podobnego

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

to najpierw je usunąć i spróbuj ponownie.

Nawet jeśli zewnętrznie określić styl za pomocą znacznika style,

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

wtedy też najpierw usunąć go i spróbować. Po usunięciu atrybutu stylu ze zdjęć wyświetli się obraz.

Atrybut wysokości może działać z IE, ale atrybut width nie działa.

Jeśli powyższe rozwiązanie nie działa, to: Niektóre pliki PNG również nie są wyświetlane. Więc spróbuj użyć ich obrazu JPG.

Answer 4

Miałem ten sam problem, gdy próbowałem wywołać przycisk ponownie captcha. Po poszukiwaniach, teraz funkcja działa poprawnie w prawie wszystkich znanych przeglądarek (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” jest używany do renderowania nowy captcha obrazu i mogą być ignorowane w Twoim przypadku. Najważniejszą kwestią jest wygenerowanie nowego adresu URL, który zmusza FF i IE do zrenderowania obrazu.