Hi, im making a wordpress plugin and i have a function where i import images, this is done with a $.each()-loop that calls a .load()-function every iteration. The load-function page the load-function calls is downloading the image and returns a number. The number is imported into a span-element. The source and destination Arrays is being imported from LI-elemnts of a hidden ULs.

this way the user sees a counter counting from zero up to the total number of images being imported. You can se my jQuery code below:

jQuery(document).ready(function($) {

    $('#mrc_imp_img').click(function(){
    var dstA = [];
    var srcA = [];
    $("#mrc_dst li").each(function() { dstA.push($(this).text()) });
    $("#mrc_src li").each(function() { srcA.push($(this).text()) });

        $.each(srcA, function (i,v) {
            $('#mrc_imgimport span.fc').load('/wp-content/plugins/myplugin/imp.php?num='+i+'&dst='+dstA[i]+'&src='+srcA[i]);
        });

    });


});

This works pretty good but sometimes it looks like the load function isn't updating the DOM as fast as it should because sometimes the numbers that the span is updated with is lower than the previous and almost everytime a lower number is replacing the last number in the end. How can i prevent this from happening and how can i make it hide '#mrc_imp_img' when the $.each-loop is ready?