使用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何时被设置，加载并准备好显示？