on load preloader with timeout function

Question

I have researched a lot, but did not find any solution to this. I have a page with heavy image slider coming in at the bottom with a lot of text as well. The text is important along with some other light images that load soon. The image slider at the end is causing page delay and I understand it will.

Current Code

  $(window).on('load', function () {
    $('.preloader').fadeOut(300);
  });

This situation works well when I have a swift load time with good connection. But when the connection gets slow, the loading time increases due to the image slider in the end.

What I am trying to achieve is:

• Situation A : Page loads swiftly when connection is good.
• Situation B : Timeout of 4 seconds for preloader if page is not loaded completely as a fail-safe measure

I do not wish for a fixed timer of n seconds for every page load.

• If the page is loaded quick: no preloader.
• If the page is loaded in 3 seconds: 3 second preloader
• If the page loads in 8 seconds: preloader for 4 seconds and then display whatever is rendered.

PS: I am very new at js, but I understand the general concept of scripts.

Please help, Thanks.

Answer 1

You can solve this by configuring a race between the preloader and the loading of the page.

If the preloader wins the race, then it is displayed.

If the page wins the race, then the preloader is never displayed and the image slider is shown directly.

But, one solution might be to show a non-intrusive preloader in all circumstances, and if the page loads quickly, then the user might never see it.