CODEWITHSUNDEEP
javascriptjqueryhtml
Richi Dubey
Richi Dubey

Reputation: 89

Load a jquery event only after the preloader ends

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

Upvotes: 0

Views: 1399

Answers (3)

dev101
dev101

Reputation: 1369

JavaScript version - run js code when everything is loaded + rendered

window.onload = function() {
    alert("page is loaded and rendered");
};

jQuery version (if you need it instead pure JS)

$(window).on('load', function() {
    alert("page is loaded and rendered");
});

You can try this:

<script>
// Preloader
$(window).on("load", function() {
    fadeOutTime = 500;
    sayHelloDuration = 5000;

    function hideSayHello() {
        var sayHello = $('.say-hello');
        sayHello.fadeOut(fadeOutTime);
    }

    function hidePreloader() {
        var preloader = $('.spinner-wrapper');
        preloader.fadeOut(fadeOutTime);
        setTimeout(function() {
            hideSayHello();
        }, sayHelloDuration);
    }
    hidePreloader();
});
</script>

Also, remove the code from lines 83 ~ 87:

<script>
$(document).ready(function() {
$('.say-hello').delay(2800).fadeOut('slow');
});
</script>

About your website performance, you can improve a lot of things right now:

  1. Use smaller thumbnail images on your front page, don't load FULL SIZE images at once. "work-showcase" section is really heavy without real necessity.

  2. Try to incorporate src-set and smaller images for small screens, larger/heavier images for bigger screens. All modern browsers support it, and it will improve performance/loading speed.

  3. Try to lazyload your big images, e.g. only when users scroll down to them, not before. It may take some work to integrate it with your image viewer, but it will additionally speed things up on initial load. My favorite library for this is this one: https://github.com/aFarkas/lazysizes but, you may find something else...

Unrelated to your original question, I have noticed that you have a bug in your HTML - see this screenshot. What kind of code editor do you use? Instead of empty space it apparently inserts invisible dots symbols which are not good. Actually, it's not the invisible dot (that's my editor's space indentation symbol), it's caused by 2 long dash (instead of short dash or minus) in your code after opening html comment tag:

enter image description here

Upvotes: 0

Benny Hinrichs
Benny Hinrichs

Reputation: 1646

My first suggestion is to just get rid of the "Hi!" message since you already have a splash page in the form of the loader. But if you really want that second splash page, you can use the JQuery when() method:

$(window).on("load", function() {
  $.when($('.spinner-wrapper').fadeOut(500)).then(displaySplashPage);
});

This assumes that displaySplashPage() is your function for showing the "Hi!" message.

You don't need $(document).ready() and window.on("load") here. Document ready waits for the HTML to be built, then applies event listeners/functions/etc to the structure. Window onload waits for everything to get loaded, then fires. In your case, you're trying to wait for all your pictures to load, so you only need onload.

You might need to have a container around all your main content set to opacity: 0 that switches to opacity: 1 as part of displaySplashPage(). That would prevent things from leaking through as you do the .fadeOut() on the loader.

Upvotes: 0

Islam Ghaith
Islam Ghaith

Reputation: 36

this may work

document.addEventListener('DOMContentLoaded', function() {
    // your code here
}, false);

if you are happy with pure javascript

Upvotes: 1

Related Questions