Заменить изображение на javascript

Question

Я хочу заменить gif-файл на javascript. Я нахожу метод ниже. Есть ли способ разместить тег javascript перед тегом img?

<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 (например $(".class"), где класс является ваш класс, или $("#id") где идентификатор идентификатор) и измените код на:

<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

Я считаю, что главной заботой OP была вспышка старого изображения, прежде чем он заменяется на JavaScript. Я предлагаю вам добавить строку 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>