Image Preloader

jQuery Plugin: Preload Images

Nov 12th in Plugins

Cost: Free, links back
Found Via: www.filamentgroup.com

Today, I came across a great jQuery plugin that will preload your images. This file now has a permanent spot in my "resources" folder. The plugin essentially scans your CSS files and preloads all of the images within it.

Image Preloader Plugin

Related Freebies

Download some more awesome freebies!

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )
  1. PG

    Thomas Sturge November 12th

    Great plugin. Just in time for me to add it to a new site I’m designing

    ( Reply )
    1. PG

      jQuery April 6th

      Great plugin and code but it downloads images from CSS file. I needed to preload images using jQuery to insert them into the DOM. This article describes it very nicely.

      I hope it will help some who came here using google :)

      Thanks for this plugin, I will probably use it in my next project.

      ( Reply )
  2. PG

    Ben November 12th

    That’s crazy… I googled this YESTERDAY and now you guys have a post on it. Bookmarked.

    ( Reply )
  3. PG

    Jhay November 12th

    Amazing!

    ( Reply )
  4. PG

    RocyHua November 12th

    Really Cool effect.

    ( Reply )
  5. PG

    Lamin November 13th

    Thanx for sharing

    ( Reply )
  6. PG

    Eduardo November 13th

    Great Plugin

    ( Reply )
  7. PG

    David November 13th

    That’s great – thank you. Say – care to share what else is in your ‘resources’ folder?! I’m always interested to learn peoples basic file structure when setting up a new project … !

    ( Reply )
  8. PG

    Ben Reid November 13th

    I’ve followed the steps to install it and I’m familiar with jQuery but I can’t see it working on my page.

    I have a header that has a .jpg that’s about 11kb ( it’s assigned using ‘background-image’ in the css and is repeated across the x axis ) in size but I still see the ‘flickering’ as it’s being loaded.

    Should the plug-in show the entire repeated section of image(s) in one go, once preloaded?

    Even navigating away from the page and coming back to it makes no difference.

    Any help would be nice. :)

    ( Reply )
  9. PG

    David Kindness November 13th

    For some reason I thought that css referenced images were automatically preloaded when the css file gets loaded into the browser.

    Thought this was one of the factors in using css rollovers instead of javascript rollovers.

    Wonder where i got that from. :S

    ( Reply )
  10. PG

    David Kindness November 13th

    ahh i remember now.
    css rollovers have both images loaded anyway with the top image (off state) placed over the background image (on state) using css.
    so its a kind of fake preloading.

    so not the same thing :)

    ( Reply )
  11. PG

    Chris November 13th

    @Ben Clear the cache on your browser and then use Firefox’s ‘Net’ menu to see if the image has been preloaded.

    I use the following plugin for my preloading:

    http://flesler.blogspot.com/2008/01/jquerypreload.html

    ( Reply )
  12. PG

    AdrianMG November 20th

    I have posted a tutorial to preload js scripts and css with simple jqery and any plugins or 3rd lirabries. It is the same concepto behind the Gmail preloader:

    http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

    ( Reply )
  13. PG

    John November 20th

    Very nice, just what I’ve been looking for infact

    ( Reply )
  14. PG

    insicdesigns November 21st

    cool i like it

    ( Reply )
  15. PG

    kareem November 23rd

    this is wonderful tutorial i will put acopy of this lesson on
    my site here
    http://www.as7ap4you.com

    ( Reply )
  16. PG

    dams February 28th

    omg GREAT! im searching for this!.
    olny in nettuts!.

    ( Reply )

Add Your Comment

( GET A GRAVATAR )
  1. Arrow
    Gravatar

    Your Name
    February 28th