Try Tuts+ Premium, Get Cash Back!

jQuery Plugin: Preload Images

on Nov 12th 2008 with 22 comments

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

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.skyblu.co.uk Thomas Sturge

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

    • http://jquery-howto.blogspot.com jQuery

      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.

  • http://www.benjaminwasilewski.com/blog Ben

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

  • http://www.jhaygamba.com/ Jhay

    Amazing!

  • http://www.sinobeta.com RocyHua

    Really Cool effect.

  • http://laminbarrow.com Lamin

    Thanx for sharing

  • Pingback: 2008 November 13 - Links for today « My (almost) Daily Links

  • Eduardo

    Great Plugin

  • http://www.ticktockdesign.com David

    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 … !

  • Ben Reid

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

  • http://www.clikdevelopment.co.uk David Kindness

    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

  • http://www.clikdevelopment.co.uk David Kindness

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

  • http://facefear.co.uk Chris

    @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

  • http://wwww.yensdesign.com AdrianMG

    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/

  • http://mildfuzz.com John

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

  • http://blog.insicdesigns.com insicdesigns

    cool i like it

  • http://www.as7ap4you.com kareem

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

  • Pingback: Bookmarks for December 5th from 13:12 to 17:22

  • Pingback: Broadcasting Adam » 8 Tips for Lightning Fast Websites

  • http://www.sembrono.com dams

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

  • http://graydiant.com Ian

    jquery is great d00dz

  • http://mattnull.com/ Matt
  • http://www.tiffanybestsilver.com Christmas Day Silver Jewelry

    It’s the very thing i want to catch. Thanks!

  • ashton

    Does anyone know how they got that loading page done?? cant seem to figure it out..

    Thanks in advance

  • http://ginva.com/ Ginva

    Which better, Preload image using javascript or CSS?

  • Pingback: 17 Useful jQuery Plugins For Developers | Weboroid