画像をjavascriptで置き換えます

Question

gifファイルをjavascriptで置き換えます。私は以下の方法を見つける。私はimgタグの前にjavascriptタグを置くことができる方法はありますか？

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

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

Answer 1

ドキュメントが「準備完了」になるまでページを安全に操作することはできません。 jqueryの$(document).ready()を使用すると、ページがロードされ、実行前に操作できるようになるまで待機します（ページ上のどこに関係なく）。例：

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

あなたjqueryの内側ができ、また、その後、レバレッジセレクタ（クラスがあなたのクラス、またはIDがIDです$("#id")あるなど$(".class")）とにコードを変更します。

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

そして、あなたはさらに後でjavascriptで変更したい場合は、変数に格納することもできます。

<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"> 

これは、JavaScriptの中にいくつかの新しいトリックを学ぶのに役立ちます。ハッピーコーディング！

More Info

Answer 2

私はそれはJavaScriptで置き換えられる前に、OPの主な関心事は、古いイメージのフラッシュだったと思います。私はあなたの画像要素を目に見えて隠すようにCSSの行を追加して、スワップ+ JavaScriptで再表示することをお勧めします。

<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>