Bild durch Javascript ersetzen

Question

Ich möchte die gif-Datei durch Javascript ersetzen. Ich finde die Methode unten. Gibt es eine Möglichkeit, dass ich das Javascript-Tag vor dem IMG-Tag platzieren kann?

<img class="myImg" src="compman.gif" width="107" height="98"> 

<script> 
    document.getElementsByClassName("myImg")[0].src = "hackanm.gif"; 
</script> 

Answer 1

Eine Seite kann nicht sicher manipuliert werden, bis das Dokument "fertig" ist. Mit jquery $(document).ready() wird es warten, bis die Seite geladen und bereit ist, vor der Ausführung manipuliert werden (egal, wo es auf der Seite ist). Beispiel:

<script> 
    $(document).ready(function() { 
     document.getElementsByClassName("myImg")[0].src = "hackanm.gif"; 
    }); 
</script> 
<img class="myImg" src="compman.gif" width="107" height="98"> 

Sie könnten auch dann Hebel Selektoren innerhalb jquery (zB $(".class") wo Klasse Klasse ist, oder $("#id") wobei id die ID) und den Code ändern:

<script> 
    $(document).ready(function() { 
     $(".myImg").attr('src',"hackanm.gif"); 
    }); 
</script> 
<img class="myImg" src="compman.gif" width="107" height="98"> 

Und Sie weiter könnte es sogar in einer Variablen speichern, wenn Sie es später auch in Javascript ändern möchten!

<script> 
    $(document).ready(function() { 
     var myImg = $(".myImg"); 
     var newImg = "hackanm.gif"; 
     myImg.attr('src', newImg); 
    }); 
</script> 
<img class="myImg" src="compman.gif" width="107" height="98"> 

Hoffe das hilft Ihnen ein paar neue Tricks in Javascript lernen! Glückliche Kodierung!

More Info

Answer 2

glaube ich Hauptanliegen des OP-Blitz des alten Bildes war, bevor es durch JavaScript ersetzt wird. Ich schlage vor, Sie fügen eine CSS-Zeile hinzu, um Ihr Bildelement sichtbar zu machen, dann machen Sie den Swap + mit JavaScript sichtbar.

<style> 
    .myImg {visibility: hidden;} 
</style> 

<img class="myImg" src="compman.gif" width="107" height="98"> 

<script> 
    var imgReplace = document.getElementsByClassName("myImg")[0]; 
    imgReplace.src = "hackanm.gif"; 
    imgReplace.style.visibility = "visible"; 
</script>