Preload images – AJAX, CSS or JavaScript

When it comes to designing your first web-site, you want it to be smooth, nice, and fast loading.

One of the main things nowadays is hi-def images used for various elements on the page: backgrounds, logos, banners, menus, buttons, … some of them a few bytes in size, others are much bigger and require time to bring it from server.

And here problem might appear.
Few highly visible problems: layout of the page is resized while image is loaded, page content is not visible because background is dark and text is light and not visible on default white surface, no menu visible, etc. So many problems with such simple thing.

There is one thing which might help – preload your images before showing the content.

I am not going to write about possible solutions here, but rather provide you with reference information which would make your search quick while skipping non-essential discussions on various forums. There are several techniques you can use, so please choose one which is best for your situation.

  1. Define exact size of the element so it is displayed properly on the first run. To avoid image placeholders, use CSS to define background image for the element.
  2. Preloading images on load of the page.– JavaScript – Page onLoad event
  3. Preload page content while showing progress indicator – JavaScript  – Page onLoad event
  4. Preloading images for the next page with CSS – No JavaScript – CSS, hidden image placeholders.
  5. Simple AJAX based state image preloader – JavaScript, AJAX
  6. Image gallery with thumbnails – JavaScript and AJAX. All you need for simple image gallery.

 I hope links above would provide you with all necessary information and spare you some time.

This entry was posted in Web-design and tagged , , , . Bookmark the permalink.

Leave a Reply

  • About

    From a junior developer through Sr Manager position, I was always interested in new technologies. Passionate speaker, IT junky, developer, architect, team lead, and development manager - many hats, one goal - making software better and being closer to people’s needs. For the most part I am using my blog as a scratch pad, writing small articles on things which I came across, was asked about more then once, and which would otherwise require additional research again and again.

  • Testimonials

    I’ve used your Greydragon theme ever since I switched to using Gallery3. It looks very slick; it does everything that I want; it is easy to customise the appearance with its many options; image preloading makes it faster than other … Continue reading

    Brian Stewart

    The greydragon theme is fantastic. It’s clean, stable and feature rich. It took me a while to decide to move to G3 but with a there like this one, I could no longer resist. Thanks!

  • Categories

%d bloggers like this: