How to Make JS Load Absolutely Last

Hey everyone,

I’m working on a Shopify project and have created a customization functionality on top of a Shopify App. You can see it here.

The Shopify App itself doesn’t give me any access to the code, except for a namespace. In this namespace I have my jQuery that runs after everything else and it works fine. The problem I have though is the loading screen. Right now it’s a dark loading div that disappears after all of the different colored images are fully loaded into the browser in the background.

However, I’d like to figure out how to make it disappear after ALL of the JS has finished running. You’ll see that it takes about a second for the color swatches to appear after the loading screen goes away, which feels like of glitchy.

Is there a way to make it so that the screen can stay until all of the JS is done processing on load? The developer of the app hasn’t given me an answer to this.

Thanks in advance!

It might sound glib, but just wait until other code that also wants to run last, has finished running.

function runAfterLoad() {
    // place code that runs after the event in here
}
window.addEventListener("load", function () {
    window.setTimeout(runAfterLoad, 1000);
}, false);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.