Question

我想知道为什么在Chrome中，这一行：

var quer = confirm("Deseja esta poltrona?");

在前一行之前加载：

imagens[i].src = "img/poltrona_selecionada.jpg";

在Firefox上，te功能在序列中完美运行。

这是我的功能：

function selecionarPoltrona() {
    var imagens = document.getElementsByTagName("img");
    for (var i=0; i<poltronas.length; i++) {
        if (poltronas[i]) {
            imagens[i].src = "img/poltrona_selecionada.jpg";
            var quer = confirm("Deseja esta poltrona?");

            if (quer) {
                break;
            } else {
                imagens[i].src = "img/poltrona_disponivel.jpg";
            }
        }
    }
}

谢谢

Answer 1

欢迎使用Image对象和<img>元素：它不是同步的。当您告诉图像它的来源是什么时，其余代码将继续运行。在看到图像之前，它不会等待图像绑定成功，要查找的图像URL，要传输的数据，要解码的字节。这一切都在代码的其余部分运行时发生。但是，确认（和警报，提示，以及所有那些可怕的功能）不会：他们阻止线程。所以这发生了：

您设置了图片.src属性，浏览器会将其安排为线程外处理。您的代码仍在继续
confirm被触发，一切都停止了。在确认处理之前，您的标签中不会发生任何事情。
点击确认。 Javascript再次运行，浏览器的图像源绑定再次运行。
经过X段时间后，您的图像将完成下载，解析和最终渲染。

如果您希望某些代码在之后运行图像完成所有工作，请执行以下操作：

... img.onload = function() { // the code you need to have run after the image finishes loading. } img.onerror = function() { // whatever we need to do if the image cannot load. } img.src = "..." // trigger the image loading attempt

或者，使用现代而不是1998 JS：

... img.addEventListener("load", function(evt) { // the code you need to have run after the image finishes loading. }); img.addEventListeners("error", function(evt) { // whatever we need to do if the image cannot load. }); img.src = "..." // trigger the image loading attempt

为什么在Chrome之前确认（）函数加载？

1 个答案: