Show content when all the css and js are done loading

[Chronzam]

I have this code that removes the preloader when the document is loaded.

I use packages like select2. These packages are still loading even if the event listener is done.

window.addEventListener('load', ()=>{

		/*--------------PRELOADER-------------*/
		const body = document.querySelector('body');
		const loader = document.querySelector('.loader');
		if(loader) {
			loader.classList.add('fade');
			body.classList.remove('overflow-hidden');
		}
});

Is there a way to show the preloader untill ALL of the content including packages have been loaded?

[Erik_J]

Hi Chronzam,

I strongly suggest that the preloader is instead removed all together!

There are some that argue that it’s necessary to delay the content as it would confuse the visitor if their connection is slow, as often is the case in India for example.

I would say that it is only an excuse for the developer to charge more. Especially when the connection is slow causing that the visitor maybe can’t use your site at all.

https://kryogenix.org/code/browser/everyonehasjs.html

@Chronzam

I have this code that removes the preloader when the document is loaded.

I suggest you use Javascript to both show and remove the preloader instead of default show it at page load!!!

You greatly annoy those visitors that have Javascript restricted at new sites as they can’t decide if the site is trustworthy or not and hesitate to enable Javascript and take a risk just to find out.

They may leave and judge your site as unfriendly and maybe question why it is necessary to use Javascript just to view the site and suspect that the site needs it in order to attack the visitor.

I for one discourage from using sites that behave in that way.

[Chronzam]

@Erik_J

There are some that argue that it’s necessary to delay the content as it would confuse the visitor if their connection is slow, as often is the case in India for example.

Oh yeah, I completely forgot about that. But how about the sites that were made with JS frameworks?

[Erik_J]

@Chronzam

But how about the sites that were made with JS frameworks?

They have of course decided that the site’s features makes that necessary so they have no other affordable option.

Then there are devs that makes basic features like the navigation Javascript dependent rather than take a course in CSS.

[James_Hibbard]

@Chronzam

But how about the sites that were made with JS frameworks?

As Erik says, that’s a trade off. And I think you have to distinguish between web apps and web pages. For example, if you attempt to run something like Slack, Trello or Discourse with JavaScript disabled, it won’t work, as they are JavaScript apps. But if you take something more content-based (such as SitePoint’s blog), then that should work without JS — at least you should be able to read the content if not enjoy 100% of the features.

[Chronzam]

Ohh, Thanks to both of you! I’ll keep those in mind.