imageExists

[guinness]

Check if an image actually resolves to a successful HTTP status code e.g. 200 (OK). imageExists returns a promise, so make sure the browser you're using supports promises e.g. Chrome. If not, then you can look at using a polyfill (https://github.com/components/es6-promise) or if you're feeling adventurous, then change the code to use jQuery's deferreds (not recommended).

To see it working, copy the code to http://www.es6fiddle.net/ and watch the images either resolve or fail (reject).

expandcollapse popup

/*global console, Promise*/

/**
 * Check if an image is resolvable i.e. returns a HTTP status code that is not 404
 *
 * @param {string} sourceFile An image source file to check
 * @return {promise} A promise that is resolved/rejected once the image has loaded or a response has been resolved. The source file is passed through
 */
var imageExists = (function imageExistsModule(document, Promise) {
    // Append to the global object i.e. window
    return function imageExists(sourceFile) {
        if (!sourceFile || !sourceFile.length) {
            return Promise.reject(sourceFile);
        }

        // Create a HTMLImageElement node, but don't insert into the DOM
        var img = document.createElement('img');

        // Set the image element source file
        img.src = sourceFile;

        // If the image has already been loaded i.e. cached, then resolve a promise
        if (img.complete) {
            return Promise.resolve(sourceFile);
        }

        // Return a promise
        return new Promise(function promise(resolve, reject) {
            // Create event listeners for when or if the HTMLImageElement is loaded
            img.addEventListener('error', function errorEvent() {
                reject(sourceFile);
            });

            img.addEventListener('load', function loadEvent() {
                resolve(sourceFile);
            });
        });
    };
}(
    document,
    Promise
));

(function example(imageExists, console) {
    // Check if guinness' thumbnail exists. This returns a promise object
    imageExists('https://www.autoitscript.com/forum/uploads/profile/photo-thumb-35302.jpg').then(function promiseThen(image) {
        console.log(image + ' => OKAY');
    }).catch(function promiseCatch(image) {
        console.log(image + ' => FAIL');
    });

    // Check if a random thumbnail exists. This returns a promise object
    imageExists('https://www.autoitscript.com/forum/uploads/profile/random-thumb.jpg').then(function promiseThen(image) {
        console.log(image + ' => OKAY');
    }).catch(function promiseCatch(image) {
        console.log(image + ' => FAIL');
    });
}(
  imageExists, 
  console
));

 

Edited June 5, 2016 by guinness

[guinness]

Minor refactoring to meet Airbnb's style guide

[guinness]

Minor adjustments to the code above. My JavaScript style is always changing, which I guess is a good thing?!