javascript - FileReader() を使用して img src 属性が設定されているため、スピナーを表示します。

Question

次のコードを使用して画像ファイルを読み取り、結果を画像属性の src として設定しています。

 document.getElementsByClassName("upload-image"),
    function(fileElement) {
        var previewElement = document.createElement("img");
        previewElement.style.display = "block";
        fileElement.parentNode.insertBefore(previewElement, fileElement);

        var fileReader = new FileReader();

        fileReader.onload = function(event) {
            previewElement.src = event.target.result;
        };

        fileElement.addEventListener("change", updateImagePreview, false);
        updateImagePreview();

        function updateImagePreview() {
            var file = fileElement.files[0];
            if (file) {
                fileReader.readAsDataURL(file);
            } else {
                var placeholderSrc = fileElement.getAttribute("data-placeholder");
                if (placeholderSrc) {
                    previewElement.src = placeholderSrc;
                } else {
                    previewElement.removeAttribute("src");
                }
            }
        }
}

これはうまくいきますが、実際の画像 src が設定されて画像が表示されるまでに時間がかかることはわかっています。

画像 src がいつ設定され、ロードされ、表示される準備ができたかを検出する方法はありますか?