XMLUI: Avoiding Broken Image Icon Display for Restricted Thumbnails

theme.css

/* 
Code to prevent broken image icon display
http://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html-without-js/37192970#answer-37192970
*/
a.image-link img,div.artifact-preview img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  height: auto;
  display: block;
  position: relative;
}

/* 
Alt text will have the same foreground/background color to prevent alt text flashing.  For thumbnails that load properly, the alt text will be present.
Thumbnails that do not load properly will be removed by jQuery.  See gu-submit.js.
*/
a.image-link img:after,div.artifact-preview img:after {  
  content: attr(alt);
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #fff;
}

theme.js

    //Thumbnails that do not successfully load will be hidden from display (and alt text will also be hidden)
    //Additional CSS will be in place to prevent a flash of the alt text and the broken image icon
    jQuery("a.image-link img,div.artifact-preview img").error(function(){jQuery(this).hide();});