Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farinspace/jquery.imgpreload
The jQuery.imgpreload plugin lets you preload images before and after the DOM has loaded.
https://github.com/farinspace/jquery.imgpreload
Last synced: 16 days ago
JSON representation
The jQuery.imgpreload plugin lets you preload images before and after the DOM has loaded.
- Host: GitHub
- URL: https://github.com/farinspace/jquery.imgpreload
- Owner: farinspace
- License: other
- Created: 2010-04-16T15:38:48.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2015-06-19T14:25:50.000Z (over 9 years ago)
- Last Synced: 2024-10-05T07:48:03.251Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://farinspace.com/jquery-image-preload-plugin/
- Size: 292 KB
- Stars: 301
- Watchers: 13
- Forks: 112
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## jQuery Image Preload Plugin
The [jQuery.imgpreload](http://farinspace.com/jquery-image-preload-plugin/) plugin lets you preload images before and after the DOM has loaded.
**Tested:** IE6, IE7, IE8, IE9+, FF, Chrome, Safari
## Usage
### Callbacks
The following are available callbacks, you may change them globally or override the defaults by passing the settings object to the imgpreload method.
$.fn.imgpreload.defaults =
{
each: null // callback invoked when each image is loaded
, all: null // callback invoked when all images have loaded
};### After DOM loaded
The following illustrates using the plugin to preload images after the dom has loaded (*e.g.* using jQuery selectors):
```
$('#content img').imgpreload(function()
{
// callback invoked when all images have loaded
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
});
```
```
$('img.logos').imgpreload
({
each: function()
{
// callback invoked when each image is loaded
// this = dom image object
// check for success with: $(this).data('loaded')
},
all: function()
{
// callback invoked when all images have loaded
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
}
});
```### Before DOM loaded
To preload images before the dom has loaded, for instance in the `head` of the document, you would have to use specific image paths.
```
$.imgpreload('/images/a.gif',function()
{
// callback invoked when all images have loaded
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
});
```You can pass a single image path (as above) or an array of image paths.
```
$.imgpreload(['/images/a.gif','/images/b.gif'],function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// callback executes when all images are loaded
});
````each` and `all` callbacks are available to use.
```
$.imgpreload(['/images/a.gif','/images/b.gif'],
{
each: function()
{
// callback invoked when each image is loaded
// this = dom image object
// check for success with: $(this).data('loaded')
},
all: function()
{
// callback invoked when all images have loaded
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
}
});
```