/    Sign up×
Community /Pin to ProfileBookmark

website preloader does not cache

Hi,
I have built a preloader animation for a website. On my localhost the animation would run anytime I reload the page but I did not tough that the same would happen when the site is live because I thought that the cashe will save the page. The preloader is on a window load event.
There is also a problem, for some users the page is black, the page is loaded and once the page got loaded the animation runs instead of the animation running while the page is loading.
Is there a way I could fix it?

This is the function of the prelaoder

“`
window.addEventListener(“load”, () => {
const preloader = document.querySelector(“.preloader”);
const preloaderBg = document.querySelectorAll(“.preloader-bg”);

setTimeout(() => {
preloader.classList.add(“preloader-finished”);
preloaderBg.forEach((bg) => {
bg.classList.add(“preloader-finished”);
});
setTimeout(() => {
preloader.parentElement.removeChild(preloader);
}, 500);
}, 3000);
});
“`

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumSep 08.2021 — This is not a real preload indicator but more of a fake as it is using a fixed timer. Therefore caching has no effect. In order to monitor loading of the page really and take into account caching you would have to listen to loading of the images and make the indicator disappear when it's finished completely.
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2021 — @Sempervivum#1636673 The reason itțs on a timer is because I want the animation to run once even if the website is loaded. Otherwise, the animation will run in just a few ms, and then the site will load and it would look weird. Although I donțt know what you mean by it's on a timer. The way I tough it would work is like the animation is running as the website is loading in the background and after is finished add the class preloader-finished after 3000ms. I tough that the "load" event listener fires only after the document had finished loading.

Are you referring to the setTimeout function or to the event listener on load?
Copy linkTweet thisAlerts:
@SempervivumSep 08.2021 — Uh, my bad, I overlooked it's on the load event for window :-)
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2021 — @Sempervivum#1636685 So any idea how I could fix it?
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2021 — @Sempervivum#1636685 Someone suggested storing it locally but I don't know how to do that and I don't know how often it will run afterward.
Copy linkTweet thisAlerts:
@Steve_R_JonesmoderatorSep 08.2021 — ["website preloader does not cashe","website preloader does not cache"]
Copy linkTweet thisAlerts:
@SempervivumSep 08.2021 — >The reason itțs on a timer is because I want the animation to run once even if the website is loaded. Otherwise, the animation will run in just a few ms, and then the site will load and it would look weird.

3 seconds is a fairly long time when loading a web document. I recommend to give priority to the loading time in order not to annoy the users.
Copy linkTweet thisAlerts:
@codyhillauthorSep 09.2021 — @Sempervivum#1636691 Ok, will change that. But how do I make it cache?
Copy linkTweet thisAlerts:
@SempervivumSep 09.2021 — First take a look at the network tab in the developer tools of your browser. It will show you if an element is loaded from cache or from the server.
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...