MooImagePreload

  • 17 May

There's nothing more ugly than a picture of a loading image (pixel by pixel). How about just fading it in, when then image is fully loaded?

Here we go, just add this little piece of code to your website and set the scope of the images you want to preload and fade in. Plus, if there’s an error while loading a specific image you can simply display a pre-set one by using the noImage option.

You can use the selector scope to load all or a certain group of images, ie. img.preload, img[rel=preload], etc.

Possible options

1.0

  • noImage: image URL to use when an error occurs (404, broken lit, etc).

new MooImagePreload('#wrapper img', {
  noImage: '404-image.gif'
});

Plus some initial style:

img {visibility: hidden}

4 responses so far. Care to add one yourself?

  1. Rino May 31st, 2009 at 14:54

    • Dude, I haven’t found any other way to contact you, so I thought a comment would be the only way.

      I was wondering how you crafted that categories list with the custom markup (without brackets around rss link and articles number for every category and so on).

      I looked around but I haven’t found anything useful on codex.

      Would you mind sharing the snippet?

      Thanks mate, rino.

  2. Sofie Hallor June 3rd, 2009 at 19:58

    • this looks very nice, mighty try it out on my site :)

  3. Oskar Krawczyk June 4th, 2009 at 09:07

    • As long as your site (sofiehallor.se) uses jQuery, that would be a no-go, I’m afraid.

  4. Luiz Jr Fernandes November 18th, 2009 at 12:39

Leave a Reply

Fill-in all the forms

Categories

Recent Tweets

  •  

Current bookshelf