How to load a Javascript function before the HTML markup ?

Question

I have a Javascript script that is sort of heavy to load and I noticed that on slower configurations, the script does load after the html markup, and that make my page to not work properly.

Loading the javascript first and then the html markup fixes my issue.

I found simple way to do it with the following :

Javascript :

jQuery(document).ready(function ($) {
            $(window).load(function () {
                setTimeout(function(){
                    $('#preloader').fadeOut('slow', function () {
                    });
                },2000);

            });  
        });

html :

<div id="preloader"></div>
<p>EXEMPLE</p>

and finally css :

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}

http://jsfiddle.net/harshdand/593Lqqnm/2/

It is jQuery though. I would like to do the same in vanilla JS since I am not proficient with jQuery and for performance reasons.

Any way someone can show me the vanilla JS equivalent of the script or a better way ?

There are multiple issues with this code and it is very clear you don't know what you are doing. `jQuery(document).ready` is used when you want to run the script after the document has been loaded completely, which conflicts with why you want to run the script inside it and there is an empty anonymous function without any meaningful code inside. Try to understand what each of line code you write is meant for instead of copying it from somewhere. — Riddler, Sep 07 '18 at 06:59
Possible duplicate of [$(document).ready equivalent without jQuery](https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) — Християн Христов, Sep 07 '18 at 07:07

JasperZelf · Accepted Answer · 2018-09-07T07:21:30.160

The (document).ready you use is triggered once the DOM is fully loaded. In your case, as you mentioned, this means that your JS is also loaded.

So basically you're looking at the DOM to see if JS is loaded. I think a nicer solution would be to look at the JS directly an determine from that is you can remove the preloader.

But to answer your question, the vanilla equivalent could be something like this:

According to youmightnotneedjquery.com you could replace the (document).ready part with this:

function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

You could than use this to trigger a CSS change in opacity, and remove the element completely once the opacity animation is done.

var target = document.getElementById('preloader');
target.style.opacity = '0';
setTimeout(function(){target.parentNode.removeChild(target);}, 1000);

In order to make the opacity fade nicely you need to add a transition to the preloader in CSS:

 -webkit-transition: opacity 1000ms linear;
 transition: opacity 1000ms linear;

Just make sure the animation in the CSS is the same duration as the timeout in the JS. The complete code would be something like this: http://jsfiddle.net/8ua69dbL/10/

quick question : Where do I insert my code ? for example a simple `alert('hello')` ? Otherwise this code works pretty well — Cobako, Sep 11 '18 at 00:21

How to load a Javascript function before the HTML markup ?

1 Answers1