css: add a “loading” icon to your larger images
Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading. You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.
Step 1: Find a preload image.
There are many fantastic sites out there that will allow you to create your own preload images. Our favorite is here. Just remember not to choose an icon that is too large (file size), or it may not load until after the larger image has loaded. Here is the one that we have created:
Step 2: Create the CSS
There is just a little bit of code to create here, and it can be pasted directly into your stylesheet. Just be sure to replace the “youricon.gif” text with your image name.
Code to paste into your stylesheet:
.load{background:url('images/youricon.gif') no-repeat center;}
Step 3: Applying the code
There are a couple of ways to do this, but this is probably the best solution (depending on your application). Simply encase the image you are interested in loading within a “load” div, and apply the width and height of your image to the div.
Example:
<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>
Here it is applied to an image:
You will likely need to clear your cache and reload this page to see the loading icon appear. A more thorough example of this loading icon in action can be found here.
As mentioned by contributor Lim Chee Aun below, you could also bypass the div and apply the .load class directly to the image itself, and here’s how you can do it:
<img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" /></div>The reason we hadn’t mentioned this idea initially, is if the image does not load it can break the look of the design. If you are absolutely positive you will not have any loading issues, you don’t care if the image needs to be centered (while validating xhtml strict), or if you are applying the class to multiple images, this may be a cleaner solution for you. See our updated example page below for examples of the method created both ways.
You can also apply this globally, by adding this to your stylesheet instead:
img{background:url('images/youricon.gif') no-repeat center;}
Note that in this case, you may run into issues whereby an image loads in an area where the loading icon color may be mismatched. For example, if your content area is white and you create a loading icon with a white background, it will look fine in that area. But your left hand column is black, an image loading on the left hand column will have a poorly colored loading icon applied to it. To counter this, you could always apply the loading icon only to your primary content area, like this:
#yourcontentdiv img{background:url('images/youricon.gif') no-repeat center;}
If this solution doesn’t fix the problem for you application, let us know what you are doing differently and we’ll be happy to go into more detail.
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
About Jeff Jahn:
Father, Husband, lover of life. Passionate about building exceptional products, platforms and ideas, and pushing the envelope on what can be achieved through technology. Bootstrapper, willing to radically shift direction if the need arises and always engaged.
Jeff is recognized as a leading authority in web, mobile, social media and emerging online technologies. One of 20 Rising Stars Under 40 (Cobb Life Magazine).
Tags: css, loading icon, preload
January 26th, 2008 at 1:30 pm
If I’m not mistaken, if the width and height are specified for the img tag, the ‘.load’ class or the background loading image could be applied directly to the img tag instead of the additional div tag.
January 26th, 2008 at 2:00 pm
Thanks for the suggestion Lim Chee Aun! We have updated our article and example page to reflect this option.
January 27th, 2008 at 1:53 pm
Brilliant, and simple!
January 28th, 2008 at 12:18 am
[...] DynamiX Labs » articles » css: add a “loading” icon to your larger images What a good idea. Might be a bit much for every image on your page, but would work like a charm for something like a gallery. (tags: css loading animation image graphics) [...]
January 28th, 2008 at 2:21 am
[...] DynamiX Labs » articles » css: add a “loading” icon to your larger images One of those “oh duh!” idea. Put a loading image in the background so that it is covered when the real image loads (tags: image css speedupyoursite) [...]
January 28th, 2008 at 8:27 am
Hi Richard. Exactly right, it’s ideal for either a gallery, or for images that are considered very large. In other words, the 15kb jpg’s on the site won’t need the effect as they will load too quickly, but a 150kb image could benefit.
January 29th, 2008 at 1:18 am
David Scatigna has linked to this article.
January 29th, 2008 at 11:08 am
Freedom of Speech has linked to this article.
January 30th, 2008 at 10:28 am
This is a pretty cool idea!
However, wouldn’t it be easiest overall to just apply the background image to the <img> tag directly, without having to worry about a class? Something along the lines of:
img {background:url(‘images/youricon.gif’) no-repeat center;}
Admittedly, most images would load quickly enough that you’d never see the background image. But it saves you (the designer) the problem of deciding what constitutes a “large” image. What may be sufficiently small for someone on broadband might be quite large for someone stuck using dial-up. And even broadband hiccups from time to time. At least then, the user knows something is loading in that space.
Again, great idea!
January 30th, 2008 at 4:57 pm
Hi CSSnewbie. That’s a great point, and the reason we didn’t mention it is because it does tend to open up a lot of opportunities for unforeseen issues.
For example, if you are using a javascript piece to rotate images on your web page, the loading icon will fade in and out behind the images. Now this may sound like an added bonus, but we have tested this idea and found that it is a detriment to the look of the rotating image effect.
In addition, in at least half of the image rotators we’ve tested, the background “loading” image was plainly visible even when the primary image was fully faded in, which of course is a distraction and unattractive. Also take the possible additional (though likely minor) load time associated with rendering the loading icon in a myriad of places where it is not necessary, and the potential that you will load an improperly colored “loading” image in certain places.
Say, for example your main content background area is white, but the left hand column is black. If you have created a loading gif with a white background, the loading image won’t fit with the left hand column area’s color scheme. Admittedly, you can create a loading icon with a transparent background, but this will also significantly add to the file size of the loading icon.
Since there will likely be few instances where an image will be large enough to warrant a “loading” effect, we thought it simplest to just encase the one or two images that may be affected by a long loading time, and leave the rest be. Again, a great thought, and depending on your application this may indeed be the simplest solution for you.
March 19th, 2008 at 4:01 am
Hello!
I think this try.
April 11th, 2008 at 1:20 am
[...] 5. css: add a loading icon to your larger images [...]
April 17th, 2008 at 2:14 pm
Design Walker has linked to this article on their web site.
April 21st, 2008 at 5:36 pm
Noupe has linked to this article on their web site.
April 25th, 2008 at 4:44 pm
kawa Mag has linked to this article on their web site.
April 30th, 2008 at 11:51 am
Smashing Magazine has linked to this article on their web site.
April 30th, 2008 at 5:41 pm
Love you guys! We have updated our site’s portfolio which uses large images with this handy CSS: http://impresslab.com/work/web.
Thanks! Keep it up!
April 30th, 2008 at 6:19 pm
Thanks Richard! I’m glad one of our articles was of use to you. Great looking web site by the way!
May 6th, 2008 at 3:13 am
[...] Add a “loading” picture to your super images- Using CSS to embed a “loading” image, to permit visitors undergo that an ikon is loading. [...]
May 9th, 2008 at 4:07 pm
[...] Add a loading icon to your larger imagesYou could use a piece of javascript to embed a ôloadingö image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, there is a simpler (and cleaner) method to accomplish the same thing. [...]
June 16th, 2008 at 9:55 am
Hi,
I found this topic very interesting. I was wondering if this method would work for embedded swf files in an html page. As they are usually larger then images it would be a neat trick.
June 16th, 2008 at 9:59 am
Hi David,
As long as you apply the div around the swf file, it should respond in the same fashion. The only thing to be aware of, is that unless you have specified that the swf should have a transparent background (by adding the wmode=”transparent” parameter), it may not work. Try it out, and if you get stuck, let us know and we can create an example for you. Thanks for the question!
June 21st, 2008 at 7:14 am
- I don’t think a period has to be added in .load. Isn’t it just “class=load” instead of “class=.load”?
June 21st, 2008 at 7:51 am
whoops! Looks like you found a typo. Thanks for letting us know! That has been changed.
June 25th, 2008 at 6:55 pm
I use de simple code in css:
img{
background: transparecente url( imge.gif) no-repeat center center;
}
… and not need create a div all time i have post a image!
July 3rd, 2008 at 10:37 pm
This is an amazingly clever technique! Thanks for sharing!
July 10th, 2008 at 9:54 pm
Thank for sharing with us. great tutorial
July 11th, 2008 at 9:50 am
Great!, I will add this technique in my website thanks for this great tutorials.
January 9th, 2009 at 3:22 pm
[...] | Dynamix Labs var addthis_pub = ‘Zptweb’; var addthis_language = ‘es’;var addthis_options = ‘email, favorites, [...]
February 26th, 2009 at 4:03 pm
I cannot get this to work with my embedded flv and swf on my html page. Here is some of the code from my page…
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(“page” + id + ” = window.open(URL, ‘” + id + “‘, ‘toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=750,height=550′);”);
}
// End –>
hype413, inc. | Film, Video, Print, and Web Production | Philadelphia PA | Video Portfolio | Restaurant Reel
<!–
body {
background-image: url(../assets/bg_2.jpg);
overflow: auto;
width: auto;}
load {background:url(‘assets/loader.gif’) no-repeat center; }
…. and then to the video
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','480','height','360','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_2&streamName=../assets/flash/restaurant_reel&autoPlay=true&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive‘ ); //end AC code
Any help on this would be great, or point me in the right direction. Thanks
Tyler
February 26th, 2009 at 4:07 pm
sorry all the code did not paste…
I have this in my style sheet
load {background:url(’assets/loader.gif’) no-repeat center; }
and then I inserted this before my video…
Is there something else i need to add. I simple just want to indicate that the video is preparing to play (loading). Do I have to turn autoplay off.
March 26th, 2009 at 4:08 pm
[...] Add a “loading” icon to your larger images Have you found this post useful? If so please share it: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
March 27th, 2009 at 3:25 pm
[...] Add a “loading” icon to your larger images [...]
April 2nd, 2009 at 8:33 am
[...] Add a “loading” icon to your larger images [...]
April 7th, 2009 at 8:10 pm
[...] Add a “loading” icon to your larger images [...]
April 22nd, 2009 at 10:27 pm
[...] 25. 纯 CSS 预加载效果 Add a “loading” icon to your larger images [...]
April 25th, 2009 at 3:20 am
it’s a good idea.. and i want to try…
your website looks like beatuiful..
May 3rd, 2009 at 2:14 pm
[...] Add a “loading” icon to your larger images [...]
May 17th, 2009 at 2:17 am
[...] Add a Loading Icon to Your Larger Images – An easy, non javascript, way to let your visitors know that images are loading. [...]
June 23rd, 2009 at 6:50 am
Hi Tyler,
It looks like some of your code may have been parsed out before it made it to us. That said, my first thought would be that it appears you are missing the period before “load” (like .load) in your style declaration, so the style isn’t getting applied to that class. If you are still having trouble, feel free to e-mail us through the contact form with your code. Thanks Tyler!
July 1st, 2009 at 7:52 pm
[...] zip file Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧 The CSS Text [...]
July 21st, 2009 at 12:02 am
[...] – load ikon css-sel nagyméretű képekhez saved by pepe692009-07-19 – Preload adjuster backing itself off? saved by [...]
July 27th, 2009 at 9:14 pm
Simple, and it works! I applied it to the img tag in my stylesheet instead of using the .load class. Thanks y’all!
August 1st, 2009 at 12:14 am
Very nice site!
August 11th, 2009 at 2:58 am
[...] Add a “loading” icon to your larger images- Using CSS to embed a “loading” image, to let visitors know that an image is loading. [...]
August 17th, 2009 at 5:52 pm
[...] zip file Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧 The CSS Text [...]
August 17th, 2009 at 5:58 pm
[...] Add a “loading” icon to your larger images [...]
August 31st, 2009 at 2:26 am
[...] DynamiX Labs » articles » css: add a “loading” icon to your larger images – [...]
August 31st, 2009 at 2:31 pm
[...] DynamiX Labs » articles » css: add a “loading” icon to your larger images http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images – view page – cached #DynamiX Labs RSS Feed DynamiX Labs » css: add a “loading” icon to your larger images Comments Feed DynamiX Labs css: preloading images with css css: preloading images with css php: keeping your site’s copyright up to — From the page [...]
September 1st, 2009 at 12:14 pm
Great technique, much better than alot of JavaScript alternatives.
September 1st, 2009 at 12:59 pm
Thanks Dave!
October 8th, 2009 at 1:24 am
Nice step wise guideline. Well explained, Thanks for sharing this nice post.
November 6th, 2009 at 12:52 am
[...] Add a “loading” icon to your larger images [...]
February 10th, 2010 at 6:47 pm
very interesting so this can be applied toa swf file? I may try it, later on thanks for the information. Learning new stuff about css
March 7th, 2010 at 8:34 am
hey guys, got an error
Warning: mysql_connect() [function.mysql-connect]: Access denied for user 'npyyvlog_dcmsa'@'localhost' (using password: YES) in /home/npyyvlog/public_html/Connections/dcms2.php on line 9
Fatal error: Access denied for user 'npyyvlog_dcmsa'@'localhost' (using password: YES) in /home/npyyvlog/public_html/Connections/dcms2.php on line 9
when clicking on your "need help with your website" graphic on this page
http://www.dynamixlabs.com/2008/01/17/a-quick-loo…
March 9th, 2010 at 11:37 am
Thanks for the heads' up Louis! This has been fixed.
March 9th, 2010 at 1:10 pm
nice job
March 9th, 2010 at 1:14 pm
Thanks Arif! We'd love a retweet if you enjoyed.
April 26th, 2010 at 9:01 am
very useful tutorial, will try this out today. thanks!
May 16th, 2011 at 3:48 am
so interesting , i’ve learned a lot about css , thanks a lot
June 15th, 2011 at 12:03 am
Thank you!! I needed a load icon to appear before a flash slideshow. Same thing, it worked!
November 2nd, 2011 at 9:08 pm
[...] Add a “Loading” Icon to Larger Images [...]
November 10th, 2011 at 8:12 am
nice tutorial… very useful