Simple technique to preload images at specified moment

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. Here I would like to present some of my favorite technique which can be used for preloading images.

Why preloading?

Preloading images can be useful when you need resources without waiting for download them. However, while technique for preloading is important then sometimes is more important when you do this.

Disadvantages

Preloading is useful. However, there is a problems which could affect on overall performance. Every browser have a limitations for opening HTTP requests at the same time for domains, including subdomains. Opening a lot of HTTP requests at the same time may really slowing down your site (application). Even, if different content is downloaded from different (sub)domains it's still consumes browser and network resources.

Preloading also means that user will download files. When you are 100% sure that they will be used then fine. But if files may not be used then sometimes it's better to do not preloading images. Yes, I know. Every scenario needs specified solution. But just consider this when you need preload and when not. On the other hand, if possible, then files once downloaded then they could be stored in cache. Find best compromise for you.

How about preloading in specified time?

I prefer to preload images in very specified moment. Not just immediately e.g. when "onload" or when DOM is ready. When all my important actions are already done then I say to browser "Hey, now you can download images which I use later.". To do this I created one, separate file (it's concatenated later with other CSS files, so it's not producing extra HTTP request) named preload.css.

My proposal for preloading images

preload.css contains:

  1. body.preloadImages:after {
  2. content: url(images/image1.png) url(images/image2.png);
  3. position: absolute;
  4. left: -9999em;
  5. display: block;
  6. width: 0;
  7. height: 0;
  8. overflow: hidden;
  9. }

And then in any moment you can add class name preloadImages to class attribute to body HTML element to start downloading images. Note: images in content CSS property must be written in one line! Otherwise I discovered it wasn't working for me. Example of JavaScript code:

  1. <script>
  2. var body = document.body || document.getElementsByTagName('body')[0];
  3. body.className += ' preloadImages';
  4. </script>

Note: the JavaScript code is really as an example here. Adding new class name to class attribute can be done in a very many ways.

Example

Yes, I like real examples. So, in that case I have prepared simple test page with example code. By the way, you may also be interested in some tool to check how many simultaneous connections can be done by your browser.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...Loading...

Comments

You can leave a response, or trackback from your own site.

2 Responses to “Simple technique to preload images at specified moment”

  1. polish, 1 September 2013, 09:15

    Preloading is useful when a website is view in mobile mode. Then user will avoid click enlarge the photo but he can see the preview.

  2. Cezary Tomczyk, 11 September 2013, 09:15

    @polish Good point. In that way user can safe bandwidth transfer.

Before you add comment see for rules.

Leave a Reply

Your email address will not be published. Required fields are marked *

6i9r3p (Enter the string in reverse order)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

go up