My website is : <https://365arts.me/>

So it loads about 16mbs of pics(Yes I know, I'm stupid. I'll try to change it very soon, also if someone could tell me a way to reduce size of do something else(like dynamic loading only when needed, if something like that exists) I'd be very grateful). 

I added a preloader for it using: 

[html]:

```
<div class="spinner-wrapper">
    <div class="spinner">
    <div class="dot1"></div>
    <div class="dot2"></div>
    </div>
</div>

```

and corresponging [jquery]:

```
<script>
$(document).ready(function() {
//Preloader
$(window).on("load", function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});</script>

```

this works well but the problem is I have a javascript code that comes and says Hi! but it runs only for 2.8 seconds. So if loading takes up more than that, It doesnt show up. Can someone please tell me how to make sure that it loads only exactly after loading is completed.

Thanks a ton.

Code for my website:

<https://github.com/richidubey/365-Days-Of-Art/blob/master/index.html>