Smooth background image swap – jQuery Background-Image Transition Plugin

I will show you an example right now, so you know what I am talking about.

Here is a working example

What we basically do is:

1. Create an additional hidden <div> element on top ( using z-index ) of the element we want to animate
2. Load the new image in the in the cache in the background, so that the effect is smooth
3. Set the new src to the new <div> element
4. fadeIn() the new <div> element so that it creates the illusion that the background image of our initial div is smoothly changing
5. Optional step – if we need to change the image once again, go from 2 to 5 but setting the new src to our initial <div> and then using fadeOut() on the new element, so that it disappears and the new image is set as background to the old <div>. This way we won’t have an infinitive increase of the z-index and won’t actually change the z-index of the initial <div>

OK, let’s get to work, we will start with the HTML markup:

<div id=”backImage”></div>

Well, that was pretty easy: we have a simple <div> element with some demo text and just next to it we add that additional <div> which we will need for the animation.

So, here is the CSS:

#backImage {
    z-index: -2;
    height:600px;
    width:800px;
    background-image: url('path/to/initial/img');
}

We just set a height and width of the element so that we are sure the image will actually be shown. It is generally a good idea to have the z-index set to a negative number while other elements have a greater z-index value.

We will use jQuery’s Background-Image Transition Plugin for our example.

First, add jQuery and the plugin

<script lang=”Javascript” src=”path/to/jQuery.js” type=”text/javascript”> </script>
<script lang=”Javascript” src=”path/to/jQuery.bgImageTransition.js” type=”text/javascript”> </script>

Then, at the end of the document, add the following lines:

jQuery( function(){
    jQuery('#backImage').bgImageTransition( 'path/to/new/image', {
        duration: 'slow',
        easing: 'linear',
        helperElementId: 'backImage2',
        zindex: -1
        callback: function(){
           //do sth
        }
    });
});

The only mandatory argument is the path to the new image. The optional second argument is an object holding some tweaks. You can set the desired duration, easing, helperElementId ( which is generated by the plugin ), z-index of the helperElement ( by default it will take the selected element’s zindex and increment by 1 ) and a callback function in case you want to execute some functionality when the transition is over.

Like many things in our Universe, web performance obeys Pareto’s 80-20 principle – 20% of the elements of a website cause 80% of the effects on the performance. And if we try to slightly reduce the time spent on loading those 20% of the elements, we can get much more than 20% increase in speed.

Are servers the root of all evil?

And as most of you probably already guessed – most of the server-side elements are not within those 20%. If you slightly improve ( or think you have ) your PHP algorithms or your SQL queries, you will probably gain benefits which are close to the statistical error. ( Here we are not talking about drastic changes or bug fixes in faulty software which shouldn’t have been there in the first place ).

Speed up the browser

What turns out to have the greatest impact on loading times and user experiences are the elements which load into the browser. And writing speed enhancements for the browser is out of our scope right now – we can just try to adapt our web pages, so that it is easier for it to parse and display. Here are my top 5 rules which have given me fantastic results.

Number of HTTP requests

If we are to believe Yahoo!, 80% of the time spent loading a web page is taken by downloading the entities of that page – mainly css, javascripts and images. The problem here is that we have too much unimportant (for the users) data sent back and forth, also known as headers. Even the smallest image has its request and response headers traveling with it across the Net. So, my advice is – combine your javascript and css files and use css sprites’ images. These are image maps which hold all of your images in one file and thus only this single file is sent over with its headers. Read more on css sprites here.

Expires header

This technique is very simple, yet very powerful and rarely used. Expires headers tell the browser that the entity it has requested *will not be changed* until some date. In practice, this means that the browser will not download that entity, if it already has it in its cache – 0 bytes transfered. Be careful, though, if you need to change something on the fly ( especially when still developing a site ), you will have to change the name of that file, so that the browser doesn’t think it already has it in the cache. This can easily be avoided using a simple versioning technique ( a link to some-file.js can look like some-file.js?version=1.0 and can later be changed to some-file.js?version=1.1 which will instantly make the browser fetch the file again as the url has changed ).

So, here – simply set a far-future Expires header on static content.

GZip

Also very useful, especially on large text files (like css and javascript files). This will effectively compress your content on the server, then send it to the browser which will uncompress it and use it. But be careful – don’t use this on images as it can be counter-productive. All A grade browsers support gzipped responses, so no worries about compatibility here.

Javascript and CSS

You should already know this but just in case – compress and minify your javascript and css files; put css at the top and javascript at the bottom. Simple, heh?

Flush it!

Well, the only server-side technique in my top 5 – flush your output buffer early ( just after the <head> tag ). This is very helpful on sites rich in html and text content because it will send the <head> of the html document fast enough so that the browser may start downloading the respective css files ( which you have put in the head, as described in the previous rule ) and underlying css images before the rest of the document has been transfered. Otherwise, you may end up in a situation where the whole HTML document needs to be received before css and the images can start being fetched.

This is just a sneak overview of the techniques – for a thorough list and technical help, please visit yahoo’s site