Images show and then disappear in Safari

Question

So this is really weird. If you go to http://floridahome.palmbeachpost.com/ in Safari and do a search for listings, you'll see our image not found come up on results where the images really should come up. If you don't see what I'm talking about the on the first page, click through a couple pages. If you do the same search in Firefox or IE the images should show up.

What is weird is that it looks like the images load for a split second and then disappear. The onerror event gets thrown and that's why we show the place holder image.

If anyone can shed some light on this I'd be forever grateful.

(I know our source doesn't validate, I'm going to work on that tomorrow first thing)

Answer 1

In YAHOO.backyardpost.init(), there’s this:

var imgs = document.images;
for (var i = 0; i < imgs.length; i++) {
    if ((!imgs[i].complete || 
        imgs[i].naturalHeight == 0 || 
        imgs[i].naturalWidth == 0) && 
        imgs[i].src.match(/services\.palmbeachpost/i)) 
    {
        imgs[i].src = '/static/img/gfx/img_not_available.jpg';
    }
}

When does this get called and are you certain that the images have completely loaded at the time it’s called?

I can’t set a breakpoint on this line given the minified code, but I would suspect that one of the conditions—possibly imgs[i].complete—is not true and causing the image to be replaced.

There is anecdotal evidence [1] [2] that the complete attribute doesn’t always work in Safari.