Javascript一直先执行script的内容（用的是idea）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img id="light" src="img/off.gif">
    <h1 id="title">aaaa</h1>
    <script language="javascript">
        alert("添加成功!")
        var l=document.getElementById("light");
        alert(l);
        l.src="img/on.gif";
        var title=document.getElementById("title");
        alert("change");
        title.innerHTML="bbbbb"
    </script>
</body>
</html>

无论script放在哪里都是先执行alter语句；按照正常的话不应该是先显示图片再弹alter语句里面的内容吗

浏览器加载图片需要时间。

代码放到window.onload事件函数中即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif">
    <h1 id="title">aaaa</h1>
    <script language="javascript">
	window.onload = function () {
	    alert("添加成功!")
        var l=document.getElementById("light");
        alert(l);
        l.src="img/on.gif";
        var title=document.getElementById("title");
        alert("change");
        title.innerHTML="bbbbb"
	}
    </script>
</body>
</html>

要把代码封装到函数里面，不在函数内部的代码页面初始化就会执行。最好是在img标签加一个单击事件，然后调用函数，就能达到你想要的效果。

参考资料：https://edu.csdn.net/course/detail/3399

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632