承诺：图片加载时间问题

Question

我正在尝试使用JavaScript预加载图像并在加载后淡入淡出。

我还想学习一些关于Promises的内容，我使用这个tutorial JS code来加载图片：

function loadImage(url) {
    return new Promise(function (resolve, reject) {
        var image = new Image();

        image.onload = function () {
            resolve(image);
        };

        image.onerror = function () {
            var message = 'Could not load image at ' + url;
            reject(new Error(msg));
        };

        image.src = url;
    });
}

（我更正了一个关于错误的变量名称的小错误并将其推送到babel，使其尽管承诺了ES5符合）

我这样用：

$(document).ready(function() {
    var imageEl = $('.myImg');

    loadImage(imageEl.data('src')).then(function(image) {
        imageEl.attr('src', image.src);
        imageEl.addClass('myImgLoaded');
    });
});

使用这个CSS：

.myImg {
    opacity: 0;
    transition: opacity 5s;
}

.myImgLoaded {
    opacity: 1
}

最小的HTML：

<img data-src="https://placeimg.com/400/200/any" class="myImg">

Fiddle

它有点工作，但某处似乎有时间问题。要亲自看看，可以试试小提琴并用devtool限制连接。然后您会看到通常在图像出现之前添加myImgLoaded。当它出现时，转换已经结束，它的构建非常难看。

但我无法弄清楚问题所在。调用.then()后，图片已预先加载，因此imageEl.attr('src', image.src)应该是即时的，或者我错了？为什么会出现这种时间问题？