Изменение изображения с помощью 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 не изменяется правильно прочь. В чем может быть причина?

EDIT: Поскольку я смог решить эту проблему, я добавил галочку в html и сделал visibility = hidden в css. Я правильно наложил это поверх изображения загрузки для процесса 1 и вместо изменения src я изменил видимость галочки для процесса 1.

Но на этот раз проблема была с image2. Он изменился только вместе с image3, хотя изображение галочки уже было вставлено в html. Думаю надо все перекрывать !! Что не так. Изображение всего 4 кб. Его на локальном сервере.

Изменить: вот часть 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';
})();