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