这是一个图像 slider 。基本上取自w3school。
<head>
<script src="code.js"></script>
</head>
<body>
<section id="slider">
<img class="sliderImage" src="images/slider/1.jpg" style="width:100%">
<img class="sliderImage" src="images/slider/2.jpg" style="width:100%">
<img class="sliderImage" src="images/slider/3.jpg" style="width:100%">
<img class="sliderImage" src="images/slider/4.jpg" style="width:100%">
<a id="sliderprev" onclick="plusDivs(-1)"> ❮ </a>
<a id="slidernext" onclick="plusDivs(1)"> ❯ </a>
</section>
</body>
以及外部js文件:
var slideIndex=1;
sliderFunction(slideIndex);
function plusDivs(a){
sliderFunction(slideIndex += a);
}
function sliderFunction(a){
var i;
var b = document.getElementsByClassName("sliderImage");
if(a > b.length){
slideIndex = 1;
}
if(a < 1){
slideIndex = b.length;
}
for(i=0; i < b.length; i++){
b[i].style.display = "none";
}
b[slideIndex-1].style.display = "block";
}
所以它只在我放置 <script> 时才有效。之后<image>和<a> 。我知道 js 文件在文档之前加载，这导致了问题。我到底该如何解决这个问题？
最佳答案
So it only works whenever I place after those
<image>and<a>.
这是 what you should do ，除非有充分的理由去做其他事情。把你的script标签位于文档的最后，就在结束之前 </body>标签。这样，所有元素都可供脚本代码使用，并且加载脚本不会延迟渲染页面。
如果您必须将它们放在其他地方，请使用 async or defer 但如果您使用多个脚本，请注意脚本加载顺序问题。 (并检查您的目标浏览器是否有适当的支持。)
如果您无法做到这一点，请使用 DOMContentLoaded 事件;所有现代浏览器都支持它:
document.addEventListener("DOMContentLoaded", function() {
// Code here
}, false);
关于javascript - 如何仅在加载所有元素后才在头部加载Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40345546/