Monday, October 5th, 2009

QueryLoader, a full page preloader

Category: CSS, JavaScript, jQuery

The classic animated gif, or the “loading…” text, could be now easily replaced thanks to this new jQuery plug-in.

Specially suited for a page loads of images, the final result showed in this demo looks really nice and flashy.

Features:

  • Preload a whole web page.
  • Preload a part of the page.
  • Gets all images, <img> tags and background-image of your CSS
  • Easy to implement.
  • Adjustable loading bar.
  • Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Full post, demo, and source code, are in Gaya Design blog.

To be honest, I instantly had a thought about this technique:  wasn’t the DOMContentLoaded event purpose the one to avoid people waiting a full page download before they’re allowed to interact with it? … never mind, we cannot do much in any case in front of images dedicated layouts.

Posted by webreflection at 12:30 pm
11 Comments

+++--
3.3 rating from 11 votes

11 Comments »

Comments feed TrackBack URI

It’s a simple effect, but it really impresses people. I integrated something like this almost as an afterthought into the software I work on, where the login/loading page fades away to reveal the application, and I’ve heard from several sources how impressed they are with that simple fade effect.

Comment by Joeri — October 5, 2009

The classic animated gif, or the “loading…” text, could be now easily replaced

There’s no such thing as a ‘classic’ loader gif for entire pages, people do that in Flash, this makes your page look like you wanted to build it in Flash but couldn’t so just went with a loader. What’s worse is it reminds me of those cheasy IE page transitions nobody uses anymore.

People with a slow connection are used to images taking a while to load so why waste your time giving them something don’t expect? They’ll be irritated by it after a few clicks. This might impress some bad designers that still think IE page transitions make your pages look cool.

Comment by Jadet — October 5, 2009

+1 Jadet – This breaks user experience imho.

Although it does have potential uses in web applications and javascript games.

Comment by Darkimmortal — October 5, 2009

Wasn’t it FrontPage that used to do this?

Comment by eyelidlessness — October 5, 2009

A few clicks? Couldn’t you just set a cookie after the first page?

Comment by ifwdev — October 5, 2009

I just want to see the underlying code. I could careless about the effect used, but I really need some good preloading code.

Comment by AWebDev — October 5, 2009

There’s no such thing as a ‘classic’ loader gif for entire pages

Jadet I hope you have used at least once gmail, hotmail, or images galleries … there is a loading, and an animated gif and I am sure if you read my comment until the end you’ll find out we have almost same thoughts about this technique but thanks for the comment.

Comment by webreflection — October 5, 2009

@ifwdev: There’s no need for cookies, just don’t use this where you don’t want it. If all your pages have exactly the same content you could use cookies since then there wouldn’t be anything to preload, but if that is the case you probably need to rethink what you are doing.
.
For web applications incremental loading is much better then this, presenting people with what’s loaded instead of hiding the entire page while they wait for everything to load gives the impression that your applications are snappier. Sites render like that by default so while this might look like a nice effect at first all it really does is cause everything to be perceived as slower.

Comment by Jadet — October 5, 2009

@webreflection: Of course, but there’s a lot more then simply loading what’s underneath going on in applications like that, this wouldn’t be a drop in replacement. Applications like that would benefit a lot more from incremental loading. I guess we can all agree that blocking a page is hardly ever a good thing. Just makes me wonder why this was posted, the web would seem a lot slower if people actually started using this.

Comment by Jadet — October 5, 2009

Well I for one like it… and will be using it immediately… is it a simple effect? absolutely… but that can be built out to something more compelling…

The best use case is for sites where a Flash look & feel is required, but Flash is overkill (say a photographer’s site that still wants solid SEO)

Comment by OwenL — October 5, 2009

This is really useful; preloading images, especially background images etc from CSS that are not currently in-use on first render is a very real solution for web apps and complex user interfaces. However as mentioned above by others, there is absolutely no need to ‘hide’ the page until everything has loaded, some real complex apps may do it, like gmail but that’s different, you log into your email daily – you know what your waiting for.

I think this is best used behind the scenes, let the page render naturally showing people what’s on the way, make it look like it’s loading as fast as possible for them. All additional images for the application/ui can be loaded behind the scenes as the users begin to interact with the interface.

Your going out for dinner; someone comes to pick you up, knocks on your door and you’re not ready or on the phone.. whatever. Do you let them wait outside? Nope, you let them in and they can just wait in the porch.

Basically, don’t leave people out in the cold :)

Don’t leave people out in the cold. :)

Comment by RobFrontEndDeveloper — October 6, 2009

Leave a comment

You must be logged in to post a comment.