Question

我想用javascript替换gif文件。我找到了下面的方法。有什么办法可以在img标签之前放置javascript标签吗？

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

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

Answer 1

在文档准备好之前，页面无法安全操作。＆＃34;使用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")，其中class是您的类，或$("#id")其中id是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>

用javascript替换图片

2 个答案: