Neal Grosskopf Dot Com A NG Designs Site

Neal Grosskopf Dot Com Return To Neal Grosskopf's Home Page a NG Designs Site

Toolbar

  • Skip To
    • Menu
    • Content
  • Validate
    • HTML
    • CSS
    • WAI
  • Font Size
    • Small
    • Medium
    • Large
    • Extra Large
  • Account
    • Create Account
    • Login

Interact

Navigation

  • Home
  • Interact
    • Blog
    • Message Board
    • Open Links
    • Open Videos
    • Photo Gallery
    • Polls
    • Reviews
    • Geek Speak
  • Designs
    • View All Designs
    • Professional
    • Corporate
    • Templates
    • Personal
    • Club
    • NG Designs
    • Web Guides
  • Files
    • Artwork
    • Wallpapers
    • My File Downloads
  • Extras
    • Bookmarklets
    • The Magic 8-Ball
    • Career Builder RSS Feed Generator
    • Monster.com RSS Feed Generator

How To Add Image Loading Icon To Large Images Using CSS

  • Actions
    • View All
    • View Article Statistics
    • View User Statistics
    • Search
    • Subscribe to RSS Feed

Recent Articles:

  • Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
  • Tracking Internal Website Campaigns With Google Analytics and PHP
  • Everything You Need to Know About jQuery's .data() Method
  • Google vs. China: How It Will Affect Web Workers
  • Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
View All

Subscribe To Feed
loading Subscribers

I'm On Twitter loading

Oct 27

I ran into a problem on my website recently with slow loading images. The images weren't actually very large, the reason they were slow loading was because I was using ASP.NET to dynamically create thumbnails for my images off of a larger source image. I guess I'm just too lazy to resize 75+ images in photoshop and I'm very clean when it comes to throwing more files on my webserver. My solution was to have one file and just resize it with ASP.NET. That worked great but some pages had 20 or so images and could take up to 20 seconds to load them all. I started searching for solutions to this problem with JavaScript but for the most part I dislike JavaScript and I was looking for something better than "if (document.browser.support.some.random.method)". I found my salvation in CSS once again.

Apply Ajax Style Loading Image To Your Images Without JavaScript

It's really simple, in fact it's too simple I don't know why I hadn't thought of it before. Simply add the .loading class to any of your IMG elements.

.loading { background: url(loading.gif) no-repeat center center; }

But wait, that's not all

I would also recommend adding dimensions to your images via the Height and Width properties in CSS. This will ensure that your loading.gif file appears completely. My images we're dynamically added to the page via an ASP loop so this was easy enough to add.

height: 125px; width: 150px;

Alt Text?

The only drawback to this solution is in FireFox (and possibly other browsers, other than IE) the alt text will cover up the background-image. A workaround might be to give the IMG tag a title attribute instead of an ALT attribute. I know this isn't ideal but it's the best I can think of. Since my images didn't need any SEO treatment I was fine with this.

To view a demo of this view my wallpapers section of my site.

Sources:

  • Google Image Search For Loading GIF Icons

Tags: css ( Add Tag )

Bookmark This Page:
  • Digg loading
  • Delicious loading
  • Re-Tweet loading
  • StumbleUpon loading
  • DZone loading
  • Snipplr
  • Script & Style

Replies:

  • Chris Retlich
    Chris Retlich
    #1

    Wed. October 29, 3:48:03 PM

    Hmmm, neat idea. I think you should somehow implement a cache of the thumbnail version - save it in some folder you don't care to browse through - use a format like "[originalfilename]-[width]x[height].[filetype]", then have your resizer script do a 301 redirect to the file URL (if it exists), otherwise, generate the thumbnail and spit it out like it currently does (when the thumbnail doesn't yet exist).


    Also, there is a similar trick - use the "lowsrc" attribute, if that isn't deprecated yet.

  • Chris Retlich
    Chris Retlich
    #2

    Wed. October 29, 3:51:03 PM

    Oh, another point about resizer script thingies (also useful for dynamically generated RSS feeds) - if you send/use the "last-modified" and "if-modified-since" headers, when you re-visit a page, it doesn't need to slowly re-load the images again, since they shouldn't have changed. If you go with the save-to-a-file-and-redirect option, then the server automagically takes care of those headers for you too.

  • Neal Grosskopf
    Neal Grosskopf
    #3

    Wed. October 29, 7:13:01 PM

    I'll look into that last-modified header. It might be trickier to do on my .net page since I don't really know .net but I find something.

  • Chris Retlich
    Chris Retlich
    #4

    Wed. October 29, 9:50:10 PM

    And let's not forget last-modified's cousin; etag.


Reply:

B U I Link Font Color Edit Preview ?
Characters: 0 Textbox Size: [+] [-]
   

  • New Comment
    #5

    Sat. July 31, 1:11:26 PM

Font Size:

  • A
  • A
  • A
  • A

Search:

Places:

  • Blog
  • Message Board
  • Chat Room
  • Geek Speak
  • Open Videos
  • Reviews
  • Tag Cloud
 

Site Links

Site

  • About
  • Contact Me
  • Site Map
  • Site Search

Interact

  • Blog
  • Geek Speak
  • Message Board
  • Open Links
  • Open Videos
  • Photo Gallery
  • Polls
  • Reviews

Random Stuff

  • Hosting by FatCow
  • © Copyright 2005 - 2010
  • Modified: Friday, July 16, 2010
  • Load Time: 0.28 Seconds

Site Coded And Designed By Neal Grosskopf Using No Crappy CMS Or Themes