Pure CSS: Better Image Preloading without JavaScript

teddY – #1

Nice! I’ve never thought of preloading images as background images with a heavily displaced position. I usually use the problematic preloading technique, but I guess it’s better to preload images in background to ensure cross-browser and cross-device compatibility. Just a question though - if that container has a background image assigned to it, then should we create empty containers to preload the images?

Trav – #3

One could also make the various constituent image elements into a single large image, which could then be positioned using css. Maybe unwieldy for a large site, but could actually improve the load time of a small site; plus, then you only need one element in order to preload all the images - or is that too crazy?

Stephen Cronin – #5

Hi Jeff,

I’m not sure about this - using this method means that there’s no alt tag. Isn’t that bad for accessibility?

I mean if someone with a visual impairment uses a text to voice reader to listen to the page, then it reads the alt tag doesn’t it, so if we use this method, then there is nothing to be read for the images.

I appreciate the images are hidden for the moment, but when you display them, is there anyway of adding the alt tag?

I’m a little cloudy about all of this and I’m not speaking from authority, but that was my impression.

Very interesting nevertheless.

Kevin Keinert – #7

Hello, I have a question on preloading images. I am preloading four images on my website, which can be seen at http://www.keinert.com -I am using these to change the image of my links when the mouse moves over them.

However, something is still wrong because when I move my mouse off of the “spinning red ball links,” my browser still has to download the spinning blue ball each time.

What am I doing wrong?
Thanks, Kevin.

Kevin Keinert – #9

Hello, thanks for the reply! I’m assuming that the blue_ball image reloads every time the mouse moves off a link, because at the very bottom of my IE6 browser, I see the message “downloading…blah,blah,blah…/bb_ball.jpg”

Sometimes the download is slow and the image takes 2 or 3 seconds to change. Most of the time it’s instantaneous.

If this is a caching issue, can you provide more info on how to troubleshoot? I don’t know what far-future headers are.

Thanks, Kevin.

Lukas – #11

Hello there Im currently trying to devolop my homepage for displaying animaiton videos and art images and I came across this webpage when trying to solve this problem of mine. Im trying to create a gallery where you can see the thumbnails of the pictures and when you click on a thumbnail the image will enlarge in a maximum resolution of 800×800 pixels. Beside the image I have 2 arrows pointing in left anr right, when you click on these images it should display the next image in the gallery or previous depending on which one you click. The gallery will not be visible because the image itself will cover it when enlarged. Now what I want to do is to preload and reload all of the images on in the gallery. Cause if I click on the next arrow I dont want to load a hole nother page just to come to the next image if you understand what I mean. So what I want to be able to do is to reload a portion of the webage and not the hole because all of my external links like, About me, photo showreel and so on , and the background should not be reloaded all the time, even thou it is saved in the cache I feel that it is not the best way to do this. So the most optimal way would be if all the images are loaded when you enter the site and when you clikc on a thumbnail that image is displayed and when you click on the next or previous arrow the next images or previosu image is displayed without having to refresh the or reload the page.

Is this possible to accomplish without javascript ? or is there a nother way to do it? I find that it is possible to accomplish with a:hover if you have your thumbnail gallery beside or something else to hover over to display your images. But nothing that can actually fix my problem. thank you for your time

SneakyWho_am_i – #12

Perfect!

Surat Web Hosting – #13

Thanks for this,

we did face lot of problems on few sites, where images are used everywhere. I hope using this technique helps me solves the problem.

Thanks for it.

Regrds
Synergy Informatics
Surat Leading Web Hosting & Design Company

Synergy Informatics – #15

Hi Jeff,

I would like to read more from you… especially compared to other blog, cause your articles are simple & effective and answers the problems in perfect sense.

Thanks
Krunal
Synergy Informatics

Rom – #16

I have a similar problem to Lukas (#11 above). I want to display a Flash streaming gallery that uses a list of images (maintained in an xml files). So, the images are streamed/loaded sequentially and this is an improvement over embedding all of the images in the video. But, there is a delay in the display of the large images the first time through the gallery show (while the thumbnails below the large image display instantly).

The problem is that this may be a large number of images, and embedding the background image statement in dozens of CSS elements is not practical. So, what is the next best technique? Would it be to create a long list at the bottom of the calling page so that the images are loaded before opening the gallery page, along the lines of the example above:

Thanks for any additional advice.

Sp.Shut – #18

I say why attaching the background images to some obscure divs, spans etc, when we could declare the neccessary background images on the neccessary elements but just with a big background-position value like -9999px and only change the position on hover or whenever needed.

Does it make sense?

Serge Krul – #20

just wanted to note that the values must end with a unit like “-9999px”.

when i tried copy-pasting “-9999″ it didn’t work (FF3).

ah, and thanx for this excellent post! :)

Bathrobewarrior – #22

I’ve heard of doing it this way though I find that a lot of times, it doesn’t seem to noticeably preload. I usually just end up using the 1 image sliding technique for buttons etc. Other images, I just try to make them small enough to not even matter. :)

I will definitely try this out though!

Cheers!

marion – #23

hey Jeff,

A few days ago I manage to solve my problem in regards to rotating my homepage photos using your site =D

thanks again for that again..hope you don’t mind me asking a little bit more in regards to this preloading topic of yours…

You see, I have about 100+ photos in there with 290X230 dimensions (320×260 when hovered)….I’ve been trying to integrate jquery lazyload plugin into my wordpress for the past two days but it seems like its not working…after reading your image preloading topics, I went to double check my theme’s style.css and its corresponding theme.js file to see if my theme is already using the preloading technique….this is what i found:

=================
in style.css:

div.photo {
/* background:url(img/sampler.jpg) center center no-repeat;*/
       width:230px;
       height:290px;
       float:left;
       overflow:hidden;
       position:relative;
       margin:0 1px 1px 0;
       /**/
       opacity:0;
       filter: alpha(opacity=0);
       -moz-opacity:0;
       khtml-opacity: 0;
}

.blankphoto {
       width:230px;
       height:290px;
       float:left;
       overflow:hidden;
       position:relative;
       margin:0 1px 1px 0;
       background-color:#000000;
}

#highlight {
       width:260px;
       height:320px;
       float: left;
       background-color:#666666;
       display:none;
       border:3px solid #ffffff;
}

///////////theme.js//////////////////////

$(function() {
       var left;
       var top;
       var bgimage;
       $("div.photo").hover(
              function () {
       var offset = $(this).offset();
       left = offset.left-18;
       if (jQuery.browser.msie) {
                            top = offset.top-17;
       } else {
                            top = offset.top-18;
       }
       bgimage = $(this).css('background-image');
       $('#hack').css({'display' : 'block', 'position' : 'absolute', 'background-image' : bgimage, top : top+'px', left : left+'px'});
       $('#highlight a#highlightlink').attr({
                            href: $(this).children('a').attr('href'),
                            title: $(this).children('a').attr('title'),
                            alt: $(this).children('a').attr('alt')
                     });

              },
              function () {
                     //out
              }
       );

       $("#highlight").hover(
              function () {
                     //over
              },
              function () {
                     $(this).css({'display' : 'none'});
              }
       );

       /*****/
       $("div.photo").each(function (i) {
              $(this).animate({
                     opacity: 0
              }, 0 )
       });
===========================

Jeff, please can you confirm PLEASE if my theme is preloading the images as background? if so, will jquery lazyload plugin work if the images are already loading as a background??? i tested my website homepage loading time with 42 images and the result is 16 queries in 0.29 seconds, i don’t know if that suppose to be good…i’ve already integrated wp plugin css sprites but want to speed it up some more to accomodate my 100+ images..

Thanks…sorry for the looong comment..

Darren – #24

I’ve been researching this for a while and I think this technique is the most reliable while also not messing with accessibility or creating extra markup. I’d also add that for accessibility it’s usually recommended to put your navigation into an unordered list so the ‘li’ parent elements of the anchors that require hover images are good candidates for the preloading images using this technique (assuming your hover images are for navigation elements and your parent list items don’t require background images themselves).