How to make Javascript in head load only after all elements has been loaded

Question

This is a image slider. Basically taken from 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>

And the external js file:

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";
}

So it only works whenever I place <script> after those <image> and <a>. I know this that js file loads before document and that's causing the problem. How exactly do I solve this?

Possible duplicate of Does it matter where JavaScript is placed on a html page? — Kritner
– Kritner, Commented Oct 31, 2016 at 15:40
Long story short, you don't want to put your JS in the <head> because it will block the page loading until the JS file is 100% loaded. Put it at the end of the <body> instead. — Simone
– Simone, Commented Oct 31, 2016 at 15:42

T.J. Crowder · Accepted Answer · 2016-10-31 15:42:34Z

1

So it only works whenever I place after those <image> and <a>.

Which is what you should do, barring a good reason to do something else. Put your script tags at the very end of the document, just before the closing </body> tag. That way, all of the elements are available to the script code, and loading the scripts doesn't delay rendering the page.

If you have to put them elsewhere, use async or defer but beware of script loading order issues issues if you're using multiple scripts. (And check for proper support in your target browsers.)

If you can't do that, use the DOMContentLoaded event; all modern browsers support it:

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

answered Oct 31, 2016 at 15:42

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zakaria Acharki · Accepted Answer · 2016-11-01 09:35:23Z

0

You could use DOMContentLoaded.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Example :

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

Hope this helps.

edited Nov 1, 2016 at 9:35

answered Oct 31, 2016 at 15:41

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to make Javascript in head load only after all elements has been loaded

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related