Edit in JSFiddle

var good200 = $('<img src="https://24.media.tumblr.com/tumblr_lsoemgev4A1qh6npeo1_1280.jpg">');

var bad302 = $('<img src="http://www.tumblr.com/photo/1280/lesfascinations/11273750776/1/tumblr_lsoemgev4A1qh6npe">');

var now = Date.now();

var caption = $("<figcaption></figcaption>");

var is302 = false;
var withCache = false;

// 1.  Click a button
$('button').click(function (e) {
    withCache = $(this).is("#withCache");

    now = Date.now();
    $('figure').empty();

    setTimeout(insertImage, 0);
});

// 2. Insert alternating 302/200 img
var insertImage = function () {
    $('figure').html(is302 ? get302img() : get200img());
    setTimeout(runImagesLoaded, 0);
}

// 3.  Run imagesLoaded script
var runImagesLoaded = function () {
    $('figure').imagesLoaded().progress(function (instance, item) {
        if (item.isLoaded) {
            $(item.img)
                .closest('figure')
                .append(
            caption.clone().text('imagesLoaded: ' + (Date.now() - now) + "ms")).append(is302 ? '302 redirect' : '200 success');

            setTimeout(addLoadedClass($(item.img)), 0);

            //alternate 302 and 200 img requests
            is302 = !is302;
        }
    });
}

// 4.  Add loaded class to img when it is loaded
var addLoadedClass = function (el) {
    el.addClass("loaded");
}

var get302img = function () {
    var img = bad302.clone();
    if (!withCache) appendRandomParam(img);
    return img;
}

var get200img = function () {
    var img = good200.clone();
    if (!withCache) appendRandomParam(img);
    return img;
}

var appendRandomParam = function (img) {
    var timestamp = Date.now();
    img.attr("src", img.attr("src") + "?" + timestamp);
}
<figure></figure>
<div>
    <button id="withCache">Load with image cache</button><br/>
    <button id="withoutCache">Load with no image cache</button>
</div>
<pre>
Loads will alternate between loading a 200 success and a 302 redirect of the same image
When imagesLoaded determines an img isLoaded, 
a class is added and the opacity transition should begin.
    
On Chrome, After the first "cycle" with image cache, 
cached image buggyness becomes apparent as CSS transitions on the 302 redirect are jittered.
    
On Firefox, in both cache situations, 302 redirects are still bugged.
This implies Firefox uses the cached image from the 2nd HTTP request.
    
In Safari, transitions work perfectly regardless of cache or HTTP status.
</pre>
img {
    width: 100px;
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
}
img.loaded {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    -o-opacity: 1;
}
figure {
    float: left;
    min-width: 150px;
    min-height: 200px;
}
figcaption {
    text-align: center
}
pre{
}
}

External resources loaded into this fiddle: