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.