Laden Sie ein externes Foto mit Javascript

Question

Ich versuche, die Bildquelle eines Bildobjekts mit Javascript zu setzen.

Ich habe

versucht

<img src="" id="image" alt=""> 
<p id="change">Change</p> 

$("#change").click(function() { 
    $("#image").attr("src", "some source"); 
}); 

Das Problem ist, dass es so scheint es, die src tut ändern, aber es funktioniert nicht, wenn das Bild nicht geladen wurde, wenn die Seite geladen. Also kann ich nicht plötzlich auf das Logo von Stackoverflow wechseln. Kann das wahr sein? Wie kann ich dann das Bild laden, während ich die Quelle ändere?

Answer 1

Ich hatte ein ähnliches Problem vor ein paar Wochen, die einfachste Möglichkeit, das Problem zu lösen, war das Laden aller Bilder, die Sie benötigen, und alle diejenigen, die Sie nicht sofort als ausgeblendet benötigen. Wenn dann Ihre Aktion, die die Änderung verursacht, ausgelöst wird, können Sie die Bildsichtbarkeit für die eine, die Sie ausblenden möchten, und diejenige, die angezeigt werden soll, ändern.

Wenn Sie Bootstrap installiert haben, ist es so einfach wie das Hinzufügen und Entfernen einer Klasse über jQuery

HTML

<img src="" id="image1" alt=""> 
<img src="" id="image2" alt="" class="hidden"> 
<p id="change">Change</p> 

Javascript

$("#change").click(function() { 
    $('#image1').addClass('hidden'); 
    $('#image2').removeClass('hidden'); 
});