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

    }

});

```