Question

My script appends to a table some code to load images. However, it interprets the image link from the contents of the table. This sometimes causes it to load errornouse images. I created a placeholder image that loads if the first image fails, however if this placeholder fails to load, then the script goes into an infinite loop.

$(document).ready(function() {
    $('tr[id^="mini"]').each(function(index) {
        var s = $(this).find('td:first');
        var product = s.text().replace(/\s+/g, '');
        s.append('<br><a href="/-p/' + product + '.htm" target="_blank">View Live</a><br><a title="Click for bigger image" href="/PhotoDetails.asp?ShowDESC=Y\&amp;ProductCode=' + product + '" onclick="window.open(\'/PhotoDetails.asp?ShowDESC=Y\&amp;ProductCode=' + product + '\',\'Option\',\'scrollbars=yes,menubar=no,status=no,location=no,width=600,height=640\'); return false;" target="_blank"><img src="/v/vspfiles/photos/' + product + '-0.jpg" border="0" style="max-width:150px;max-height:150px" id="monkey-inserted-image" /></a>');
    });
    // This checks for images that do not load //
    $('img#monkey-inserted-image').error(function() {
        $(this).removeAttr("id").attr("src", "/tamper/noimage1.png");
        // If this image fails to load, an infinite loop is created //
    });
});

I tried using .removeAttr() hoping that this would stop the loop, but it does not.

Answer 1

Why wouldn’t you expect this? You are basically telling it to try again each time it fails, so obviously if the src is bad then it will fail each time.

The removeAttr() will not do what you think it does. The error event is already registered, if you are trying to un-register it then you need to do it a different way.

Perhaps like so:

$(this).unbind('error');