jquery ajax仅在加载图像时更改当前的html

Question

I am trying to load a .php file that comes with a 2Mb image in a specific div.

I can achieve this with ajax but my problem is that I only want the current div html changed to the new one when the image is done loading. My problem right now is that my div becomes empty during the loading process.

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

Use a complete: function instead of a success: function.