时间戳

首页 > 解决方案 > 浏览器不等待特定图像加载

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

问题描述

我有一些逻辑在某些浏览器中比其他浏览器需要更长的时间（咳嗽IE咳嗽）。

因此，为了改善 UI 反馈，我尝试在执行逻辑时实现加载微调器：

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 的作品，因为它似乎显示微调器有时，而在 IE 11 中，DOM 只是在执行长时间运行的逻辑时冻结，然后似乎显示微调器。

我还没有尝试过承诺，因为理想情况下我希望支持旧版浏览器。

编辑：

所以这确实有效，但这肯定不是唯一的方法！

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

标签： javascriptdom-events

解决方案

dynamicSQLToButtons似乎是同步的，这是您较慢的浏览器长时间挂起的原因。转换此函数，使其异步并使用回调，例如

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

推荐阅读