CODEWITHSUNDEEP
javascriptjqueryhtmlajaxpreloader
user2002495
user2002495

Reputation: 2146

How to make a preloader before web page even loaded?

I'd like to make a preloader bar that shows how much the page is loading before it is fully loaded (something like pushcollective.com, notice the upper bar before the page is fully load).

How can I achieve something like this? I imagine directing the user into a loading page first and request the page using AJAX and put the requested content into a div after it has finished loading. But I don't think that's a clean solution?

Upvotes: 2

Views: 11250

Answers (4)

user2002495
user2002495

Reputation: 2146

Well, I ended with pacejs, it's pretty cool, easy to use, and easy to configure. You guys can check it out here, thanks for all the answer.

Upvotes: 0

Hooman Askari
Hooman Askari

Reputation: 1626

Recently I came across with this simple and easy to use plugin for jQuery call PreLoadMe, I find it the Best so far:

http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/

Upvotes: 0

matewka
matewka

Reputation: 10148

The website you provided a link to (http://pushcollective.com/) uses NProgress.js plugin. As far as I was able to explore it uses random values to increment the progress bar (IMHO not a very elegant solution but I guess the only possible).
Here is a snippet from plugins code:

/**
 * Increments by a random amount.
 */

  NProgress.inc = function(amount) {
    var n = NProgress.status;

    if (!n) {
      return NProgress.start();
    } else {
      if (typeof amount !== 'number') {
        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
      }

      n = clamp(n + amount, 0, 0.994);
      return NProgress.set(n);
    }
  };

Upvotes: 1

Dmitry Mizin
Dmitry Mizin

Reputation: 1

I personally wouldn't think of what I'm about to propose as of a 'clean' solution, however here's another approach without an extra AJAX call to load the page:

Separate your content into two parts: a progress bar and everything else (which would be an actual page content). The progress bar is never-ending, filling logarithmically. The filling logic should be in an tag placed right after your progress bar inside the . That way it will start working before everything's loaded, but after the progress bar appears.

Make the "actual content" block hidden initially. Subscribe to DOM Ready event. When it fires, hide the progress and show the content. Or you can show full progress for a split of a second and then hide it.

I don't think of the above as of 'clean', because it doesn't reflect actual progress, but it doesn't seem to do so in example you've mentioned either.

Upvotes: 0

Related Questions