Image fallback

by mmarcon

HTML

<img alt="Test the rest" data-info='{"placeholder": "http://placehold.it/240x181", "src": "http://farm8.staticflickr.com/7041/6908744399_ef6d548284_m_d.jpg"}' width="240px" height="181px"/>

CSS

img {
    margin: 20px auto;
    border: 8px solid #fff;
    box-shadow: 0 0 10px #ddd;
    display: block;
    color: #fff;
}

JavaScript

$(function() {
    var SETTINGS = {
        fail: false
    };
    
    var img = $('img'),
        error_handler = function() {
            var t = $(this);
            t.attr('src', t.data('info').placeholder);
        },
        url;
    img.on('error', error_handler);
    url = SETTINGS.fail ? img.data('info').src.replace(/staticflickr/i, 'nonexisting') : img.data('info').src;
    
    img.attr('src', url)
});