浏览器不等待特定图像加载

Question

I have some logic that takes longer in some browsers than others ( cough IE cough ).

So to improve UI feedback I'm trying to implement a loading spinner while the logic is being executed:

function generatePlaceholderbuttons() {
    var spinner = new Image();
    spinner.id = "spinner";
    spinner.addEventListener("load", function () {
        try {
            var emailForm = new EmailForm();
            emailForm.dynamicSQLToButtons();
        }
        finally {
            spinner.parentElement.removeChild(spinner);
        }
    });
    document.getElementById("dynamic-sql-textarea").parentElement.parentElement.appendChild(spinner);
    spinner.src = "../Content/spinner.gif";
}

Chrome kind of works, in that it seems to display the spinner some times , whereas in IE 11 the DOM just freezes while the long running logic is being executed, and then appears to display the spinner.

I haven't tried promises yet, because I'd ideally like to support older browsers.

EDIT:

So this does work, but this can't be the only way surely!

function generatePlaceholderbuttons(spinner) {
    spinner.style.visibility = "visible";
    setTimeout(function () {
        try {
            var emailForm = new EmailForm();
            emailForm.dynamicSQLToButtons();
        }
        finally {
            spinner.style.visibility = "hidden";
        }
    }, 1000);
}

Answer 1

dynamicSQLToButtons appears to be synchronous, which is the reason of your slower browsers hanging for a long while. Convert this function so it will be asynchronous and use a callback, like

    try {
        var emailForm = new EmailForm();
        emailForm.dynamicSQLToButtons(function() {
            spinner.parentElement.removeChild(spinner);
        });
    }
    finally {
        //spinner.parentElement.removeChild(spinner);
    }