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.

    View Serguei Dosyukov's profile on LinkedIn
  • Testimonials

    I’m a huge fan of this theme. I’ve got more than 90,000 pictures in my gallery3 running on a Ubuntu...


    I've been using this [theme] since the start. It is by far the most attractive, feature packed and stable of...


    The greydragon theme is fantastic. It’s clean, stable and feature rich. It took me a while to decide to move...



  • Categories