Question

所以这是一个图像滑块。基本上取自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)"> &#10094; </a>
        <a id="slidernext" onclick="plusDivs(1)"> &#10095; </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文件在文档之前加载，这导致了问题。我究竟如何解决这个问题？

Answer 1

因此，只有在我放置<image>和<a>之后才会有效。

哪个是what you should do，除非有充分理由做其他事情。将script标记放在文档的最末端，就在结束</body>标记之前。这样，脚本代码就可以使用所有元素，加载脚本不会延迟渲染页面。

如果您将放在其他地方，请使用async or defer，但如果您使用多个脚本，请注意脚本加载订单问题。（并检查目标浏览器是否有适当的支持。）

如果您不能这样做，请使用DOMContentLoaded事件;所有现代浏览器都支持它：

document.addEventListener("DOMContentLoaded", function() {
    // Code here
}, false);

Answer 2

您可以使用 DOMContentLoaded 。

初始HTML文档完全加载并解析后，会触发 DOMContentLoaded 事件，无需等待样式表，图片和子帧完成加载。

示例：

document.addEventListener('DOMContentLoaded', function() { var slideIndex=1; sliderFunction(slideIndex); }, false);

希望这有帮助。

如何在加载所有元素后才能在头部加载javascript

2 个答案: