javascript - 使用jquery非实时更改图像

Question

我有 3 个进程，因此在每个进程结束时我需要将加载 gif 的图像更改为刻度线 gif。但函数 1 结束图像不会改变，但仅在第二个函数结束后才改变。我认为执行不是逐行执行的。

这是一个片段(标记了要关注的区域)

eel.process1()(function(ret){
    if (ret == 1){
        $('#image1').attr('src', './img/tick.gif');   <------ This take change only with image 2 change (ISSUE)
        $('#P1').css('color' , 'red');             <------ This changes real time but not the image above
        eel.process2()(function(ret){
            if(ret == 1){
                $("#image2").attr("src","./img/tick.gif");  <------ This changes right when the process 2 return value is arrived
                $('#P2').css('color' , 'red');       <----- This, image2 and image1 changes all at the same time only. But I need image 1 to change before image 2 changes.
                eel.process3()(function(ret){
                    if(ret == 1)
                    {
                        $("#image3").attr("src","./img/tick.gif");   <------this changes correct time
                    } 
                    else{
                        $('#P3').text(ret);
                    }
                })
            }
            else {
                $('#P2').text(ret);
            }
        })
    }
    else {
                    $('#P1').text(ret);
        }
})

所以我遇到的问题是 #image1 没有立即更改。可能是什么原因？

编辑:当我能够解决这个问题时，我在 html 中添加了刻度线，并在 css 中使其 visibility = hide 。我正确地将其覆盖在进程 1 的加载图像上方，并且没有更改 src，而是更改了进程 1 的刻度线的可见性。

但是这次image2出现了问题。即使刻度图像已插入到 html 中，它也只会随 image3 一起更改。我想我必须覆盖所有东西!出什么问题了。图像只有 4 kb。它位于本地服务器上。

编辑:这是 HTML 部分:

<div class="waitscreen">
            <img src="./img/pre-loader.gif" id="mainload" width="200">
            <div class="progress">
                <img src="./img/loading.gif" id="image1" width="25px"><span id="P1">Reading File</span><br>
                <img src="./img/loading.gif" id="image2" width="25px"><span id="P2">Formatting Output</span><br>
                <img src="./img/loading.gif" id="image3" width="25px"><img src="./img/tick small2.gif" id="saving2" width="25px"><span id="P3">Creating Output</span>
            </div>
        </div>

Answer 1

下载您的 tick.gif 可能会出现延迟。 。为了解决这个问题，您可以将图像添加为隐藏 <img \>您网站上的元素或使用 JavaScript 预加载图像。

(function() {
    var img = new Image();
    img.src = './img/tick.gif';
})();