JQuery AJAX изменить текущий HTML только при загрузке изображения

Question

Я пытаюсь загрузить файл.php, который поставляется с изображением 2Mb в конкретном div.

Я могу добиться этого с помощью ajax, но моя проблема в том, что я хочу, чтобы текущий div html изменился только на новый, когда изображение будет загружено. Моя проблема сейчас заключается в том, что мой div становится пустым в процессе загрузки.

function ajaxcallmap(my_url, my_div, my_data) {
    $.ajax({
        url: my_url,
        data: my_data,
        type: 'get',
        success: function (output) {
            var $imgs = $("#worldmap_container").html(output).find("img"), //hide them
            imgAmount = $imgs.length, 
            imgCounter = 0;

            $imgs.on("load", function () {
                imgCounter++;
                if (imgCounter === imgAmount) {
                    $(my_div).html(output);//show the images when they're loaded
                    ajaxReady();//Recal jQuery Events
                }
            });
        }
    });
}

Answer 1

Использовать complete: функция вместо success: функция.