Created: 2008-10-20 23:52
Updated: 2016-05-08 15:15


brokenImage: a jQuery plugin

brokenImage is a jQuery plugin that is able to detect and replace images that are either broken or are taking a long time to load. If no replacement image is specified then the CSS visibility is set to hidden.


Fix a broken Image object:

  var image = new Image();
  image.src = '/might/be/broken.png';

Fix a broken image tag:

  <img src="https://github.com/might/be/broken.png" alt="Might be broken" id="myImage" />


Fix a collection of images:

  <div id="myImages">
    <img src="https://github.com/might/be/broken" alt="Might be broken" />
    <img src="https://github.com/might/also/be/broken" alt="Might also be broken" />

  $('#myImages img').brokenImage();

Set a custom image replacement instead of setting the visibility to hidden:

  image.brokenImage({replacement: '/images/placeholder.png'});

Set a custom timeout to override the 5 second default:

  image.brokenImage({timeout: 100}); // 100 ms


Licensed under the MIT: http://www.opensource.org/licenses/mit-license.php

Copyright (c) 2011 Stateless Systems (http://statelesssystems.com)

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more