Fork me on GitHub

jQuery imgPreload

jQuery plugin for preloading images (with a spinner)
Written in CoffeeScript

Demo

Day One Hundred Fifty-Six [Explore] low tide at Echo Beach lamborghini_reventon Ruby Logo

ms
ms

How to use on your website

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='imgPreload.js'></script>
<script type='text/javascript'>
    $(function(){
        $('img').imgPreload()
    })
</script>
    
Make sure each image to be preloaded has specified width and height attributes, otherwise the spinner will be displaced.
Put the spinner image (spinner.gif) in the same directory as the document, alternatively specify your own spinner/location using the spinner_src option.

Plugin Options

spinner_src – Either a relative path to the spinner or the absolute URL (default: 'spinner.gif')
fake_delay – pretend images take longer to load, value in ms (default: 10)
animation_duration – the duration of the fade in animation, value in ms (default: 1000)

Options Example

$('img').imgPreload({spinner_src: '/img/loader.gif', fake_delay: 100, animation_duration: 200})

License

This pluign is Copylefted under LGPLv3

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/denysonique/imgPreload

Bugs

Please report bugs in the Issues section of the GitHub project page.

Thanks

To Jeremy Ashkenas for syntactically sweeting the development of this plugin via awesome CoffeeScript, and thanks to CoffeeScript contributors as well.

To OGK Creative for sponsoring the development of this plugin

You can obtain nice spinners from http://ajaxload.info

Comments

blog comments powered by Disqus