Caching problem when replacing image on first load
<p>I am having a caching problem in that when the page first loads the images are not displayed on first load when clearing the cache. I am working with an external media company that provide the images. I have wrote the below code inside a callback function to replace the source of the image once loaded.</p>

<p>Am I doing this correct?  </p>

<pre><code>$('img').each(function(){

    var img = $(this);

    // AJAX HEAD request to check the larger image file has loaded 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg");

    $.ajax({
        url: img_src_large,
        type:'HEAD',
        error:
            function(){
                img.fadeIn("fast");
            },
        success:
            function(){
                img.attr("src",img_src_large).fadeIn("fast");
            }
    });

});
</code></pre>
