Preload Images for better CSS performance

I use a lot of CSS enhancements for things like hover: images, where the image changes slightly as your mouse moves over it. Great little trick to help focus the user’s attention on specific elements on the page. But if you don’t preload the images, you will have a slight (or not so slight) pause when you hover the first time – a sort of flicker. Preloading isn’t hard but in the Drupal world there are a couple of extra things that I did.

I have a custom content type called HTML text. Any sort of HTML can be added in this type as a specific node and placed where ever I want. In my case placement is done by using Panels. So what I did was to create one node that references all the images that I want to preload.

<span>

<img src=”/sites/images/icons/F-chat-lg.png” alt=”DOCResource.org Chat”>
<img src=”/sites/images/icons/F-forums-lg.png” alt=”DOCResource.org forums”>
<img src=”/sites/images/icons/F-research-lg.png” alt=”DOCResource.org research”>
<img src=”/sites/images/icons/F-services-lg.png” alt=”DOCResource.org Serives”>
<img src=”/sites/images/icons/F-top-lg.png” alt=”DOCResource.org”>
<img src=”/sites/images/icons/F-Courts-lg.png” alt=”DOCResource.org Research Courts”>
<img src=”/sites/images/buttons/more-btn-blk.png” alt=”DOCResource.org More”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/images/buttons/more-btn-ylw.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg.png” alt=”DOCResource.org Research”>
<img src=”/sites/default/files/u1/GreenFlg-Blk.png” alt=”DOCResource.org Research”>
</span>

easy as pie. i added the class ‘preload-images-class” so I can manipulate the node using CSS. I added this class from within the panel with the node.

Then, I added the node to the front page of my site and set the class in my CSS to have a couple of different styles.

.panel-pane.pane-node.preload-images-class.no-title.block {
margin-bottom: -35em;
visibility:hidden;

the visibility is the key. The images are loaded but don’t show up. But they still impact the spacing of the DIVs so I also added the margin-bottom element to account for and remove the extra space.

I also added a few other images at the same time. I have a couple of buttons that change on a hover event and they are small and don’t affect the loading of the page.

A small detail for the overall look of the site but one that gives a nice spit and polish to the UX.

Advertisements

2 Responses

  1. Great tutorial – one of my themes got rejected from Themeforest because my poor image preloading technique didn’t work! I’ll try this instead.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: