pi
pyrsmk-imagine
npm i pyrsmk-imagine
pi

pyrsmk-imagine

The bullet-proof image loader, with promises

by Aurélien Delogu

1.1.0 (see all)License:MITTypeScript:Not Found
npm i pyrsmk-imagine
Readme

imagine 1.1.0

This library is now obsolete and I encourage you to choose another solution like imagesLoaded

Imagine is a tiny image (pre)loading library with promises. It fixes weird behaviors on some browsers and add a simple/stable way to know if one or several images are loaded or not.

Install

You can pick the minified library or install it with :

npm install pyrsmk-imagine
bower install pyrsmk-imagine

Use

Imagine lets you load one or several images and executes some tasks when they had fully loaded, or catch errors when something went wrong. Here's an example with already existing images :

imagine($('img')).then(function(images) {
                    // the 'images' variable refers to the loaded images
                    $(images).animate({
                        opacity: 1,
                        duration: 250
                    });
                })
                .catch(function(images) {
                    // 'images' refers to the failed images
                    $(images).css('background','red');
                });

You can also preload some images for future use by specifying their URLs.

var images = [
        'images/example.jpg',
        'http://example.com/images/cat.png'
    ],
    preloaded;

// Preload images
imagine(images).then(function(images) {
    preloaded = images;
});

/*
    ...
*/

// Finally add them to the body
$(preloaded).forEach(function() {
    $('body').append(this);
});

License

Published under the MIT license.

Downloads/wk

10

GitHub Stars

10

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.1.0
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate