How to Preload CSS Background Images

This may be the smallest tutorial in the series, but also one of the most important. Preloading images is extremely important when setting them as a background image.

With AmplitudeJS, we encourage the designer/developer to set the element’s background image using CSS. This way the click handler stays with the element and doesn’t get mis-interpreted by clicking on an image. For example, when we implement an amplitude-play-pause button and we have a playing state. We want the playing state to be represented by a pause button so the user knows when the audio is playing they can pause it. We want these as a background image so the click events bound to the parent element aren’t mis-interpreted when clicked on the child image element. If you were putting an image inside of the parent element, javascript might not fire correctly.

The issue with using background images, is once you switch for the first time (from paused to playing) there’s a flash while the new icon loads up. This is not optimal UX. We will want to pre-load all of the background images so we don’t get this flash and we get a streamlined change between states.

Set Up Your Preload Element

You will want to find all of the background images used by your player. In our Blue Playlist, we have a bunch of them and we will use them as an example. The next thing we need to do is add them all as image tags and wrap them in a preload element like this:

<div id="preload">
<img src="/img/open-source/amplitudejs/repeat-off.svg" />
<img src="/img/open-source/amplitudejs/repeat-on.svg" />
<img src="/img/open-source/amplitudejs/prev.svg" />
<img src="/img/open-source/amplitudejs/play.svg" />
<img src="/img/open-source/amplitudejs/pause.svg" />
<img src="/img/open-source/amplitudejs/next.svg" />
<img src="/img/open-source/amplitudejs/shuffle-off.svg" />
<img src="/img/open-source/amplitudejs/shuffle-on.svg" />
<img src="/img/open-source/amplitudejs/list-play-light.png" />
<img src="/img/open-source/amplitudejs/list-play-hover.png" />
<img src="/img/open-source/amplitudejs/volume.svg" />
<img src="/img/open-source/amplitudejs/mute.svg" />
</div>

Right now, this element would be visible and all of your images will be in a random spot on the screen which is also a terrible idea.

All you have to do now is add the following CSS to the page:

div#preload {
    display: none;
}

What this does is hide the preload element through CSS. Now we have our images loading through HTML so they are cached in our browser, but the container element is not visible. When the user changes states of the player everything will go super smoothly and there won’t be a flash on initial loading of the element! That’s all it really takes!

We will be using this preload trick with the example players used in this course.

Little UX tweaks like this helps add that professional feel to your AmplitudeJS project. Feel free to reach out if you have any questions and make sure to sign up on our mailing list: AmplitudeJS to stay up-to-date with all of the upcoming features for AmplitudeJS!