Visit DynamiX Web Design! E-Mail DynamiX Web Design!

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:

loading image

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.

a very large image

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).

Twitter LinkedIn Google+ 

Tags: , ,

If you find our articles useful, "like" us!

Pass This Article On! Tiny Url: http://tinyurl.com/6jk88r

63 Responses to “css: add a “loading” icon to your larger images”

  1. Lim Chee AunNo Gravatar Says:

    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.

  2. DynamiXLabsNo Gravatar Says:

    Thanks for the suggestion Lim Chee Aun! We have updated our article and example page to reflect this option.

  3. Richard@HomeNo Gravatar Says:

    Brilliant, and simple!

  4. links for 2008-01-28 « Richard@Home Says:

    [...] 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) [...]

  5. User First Web » links for 2008-01-28 Says:

    [...] 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) [...]

  6. DynamiXLabsNo Gravatar Says:

    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.

  7. Skylog » Blog Archive » links for 2008-01-29 Says:

    David Scatigna has linked to this article.

  8. Freedom of Speech Says:

    Freedom of Speech has linked to this article.

  9. CSSnewbieNo Gravatar Says:

    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!

  10. DynamiXLabsNo Gravatar Says:

    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.

  11. FloroskopNo Gravatar Says:

    Hello!
    I think this try.

  12. ちょっと便利なCSS Tips いろいろ | DesignWalker Says:

    [...] 5. css: add a loading icon to your larger images [...]

  13. Pure CSS Effects and Tips (Does not use JavaScript) | DESIGNwalker max Says:

    Design Walker has linked to this article on their web site.

  14. Using CSS to Do Anything: 50+ Creative Examples and Tutorials Says:

    Noupe has linked to this article on their web site.

  15. Effets en Css pur et Conseils ( sans javascript ) Says:

    kawa Mag has linked to this article on their web site.

  16. Best Of April 2008 | Best of the Month | Smashing Magazine Says:

    Smashing Magazine has linked to this article on their web site.

  17. Richard ShieldsNo Gravatar Says:

    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!

  18. DynamiXLabsNo Gravatar Says:

    Thanks Richard! I’m glad one of our articles was of use to you. Great looking web site by the way!

  19. Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design Says:

    [...] Add a “loading” picture to your super images- Using CSS to embed a “loading” image, to permit visitors undergo that an ikon is loading. [...]

  20. Best Of April 2008 - Glimpses of the Aleph Says:

    [...] 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. [...]

  21. DavidNo Gravatar Says:

    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.

  22. DynamiXLabsNo Gravatar Says:

    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!

  23. MJNo Gravatar Says:

    - I don’t think a period has to be added in .load. Isn’t it just “class=load” instead of “class=.load”?

  24. DynamiXLabsNo Gravatar Says:

    whoops! Looks like you found a typo. Thanks for letting us know! That has been changed.

  25. WIlson MorgadoNo Gravatar Says:

    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!

  26. OnjefuNo Gravatar Says:

    This is an amazingly clever technique! Thanks for sharing!

  27. web designNo Gravatar Says:

    Thank for sharing with us. great tutorial

  28. danrebNo Gravatar Says:

    Great!, I will add this technique in my website thanks for this great tutorials.

  29. CSSBlog ES - ¡CSS y nada más! Says:

    [...] | Dynamix Labs var addthis_pub = ‘Zptweb’; var addthis_language = ‘es’;var addthis_options = ‘email, favorites, [...]

  30. TylerNo Gravatar Says:

    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

  31. TylerNo Gravatar Says:

    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.

  32. Discover the “Cool” of CSS: 25 Advanced CSS Techniques | Desizn Tech Says:

    [...] 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. [...]

  33. 25个CSS教程 - Booto’Blog Says:

    [...] Add a “loading” icon to your larger images [...]

  34. 25个 CSS 高级进阶教程 - 菠菜博 Says:

    [...] Add a “loading” icon to your larger images [...]

  35. 克兰印象 » 25个高级CSS技巧教程 Says:

    [...] Add a “loading” icon to your larger images [...]

  36. 神奇的CSS-25个样本迷死你 | 鹏博客 Says:

    [...] 25. 纯 CSS 预加载效果 Add a “loading” icon to your larger images [...]

  37. z.Yleo77No Gravatar Says:

    it’s a good idea.. and i want to try…
    your website looks like beatuiful..

  38. 365必备资讯网 » Blog Archive » 25个高级CSS技巧教程 Says:

    [...] Add a “loading” icon to your larger images [...]

  39. 40 Outstanding CSS Techniques And Tutorials | Arbenting Says:

    [...] Add a Loading Icon to Your Larger Images – An easy, non javascript, way to let your visitors know that images are loading. [...]

  40. DynamiXLabsNo Gravatar Says:

    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!

  41. » 50多个极富创意的CSS演示和教程 | 零食屋 Says:

    [...] zip file Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧 The CSS Text [...]

  42. Websites tagged "preload" on Postsaver Says:

    [...] – load ikon css-sel nagyméretű képekhez saved by pepe692009-07-19 – Preload adjuster backing itself off? saved by [...]

  43. John Davis Says:

    Simple, and it works! I applied it to the img tag in my stylesheet instead of using the .load class. Thanks y’all!

  44. John Says:

    Very nice site!

  45. Using CSS to Do Anything: 50+ Creative Examples and Tutorials « Knowledge Articles Says:

    [...] Add a “loading” icon to your larger images- Using CSS to embed a “loading” image, to let visitors know that an image is loading. [...]

  46. 50多个极富创意的CSS演示和教程 | 帕兰映像 Says:

    [...] zip file Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧 The CSS Text [...]

  47. 25个高级CSS技巧教程 | 帕兰映像 Says:

    [...] Add a “loading” icon to your larger images [...]

  48. Mes favoris du 30-08-09 au 31-08-09 Says:

    [...] DynamiX Labs » articles » css: add a “loading” icon to your larger images – [...]

  49. Twitter Trackbacks for DynamiX Labs » articles » css: add a “loading” icon to your larger images [dynamixlabs.com] on Topsy.com Says:

    [...] 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 [...]

  50. Dave SparksNo Gravatar Says:

    Great technique, much better than alot of JavaScript alternatives.

  51. dynamixlabsNo Gravatar Says:

    Thanks Dave!

  52. clippingimagesNo Gravatar Says:

    Nice step wise guideline. Well explained, Thanks for sharing this nice post.

  53. Discover the “Cool” of CSS: 25 Advanced CSS Techniques | Theme Center Says:

    [...] Add a “loading” icon to your larger images [...]

  54. austin web designerNo Gravatar Says:

    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

  55. LouisNo Gravatar Says:

    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…

  56. dynamixlabsNo Gravatar Says:

    Thanks for the heads' up Louis! This has been fixed.

  57. ArifNo Gravatar Says:

    nice job

  58. dynamixlabsNo Gravatar Says:

    Thanks Arif! We'd love a retweet if you enjoyed.

  59. website templatesNo Gravatar Says:

    very useful tutorial, will try this out today. thanks!

  60. PhotomontageNo Gravatar Says:

    so interesting , i’ve learned a lot about css , thanks a lot

  61. DaftyNo Gravatar Says:

    Thank you!! I needed a load icon to appear before a flash slideshow. Same thing, it worked! :D

  62. Blogging Well » Blog Archive » 30 Pure CSS Alternatives to Javascript Says:

    [...] Add a “Loading” Icon to Larger Images [...]

  63. imagemaskingservices Says:

    nice tutorial… very useful






DynamiX Web Design

DynamiX Labs is Copyright © 2014 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.


The DynamiX Mascot button submit it! Background
hire dynamix!