Compruebe si las imágenes cargadas dinámicamente están completas

Tengo un código que se publica en un script php que lee todos los archivos en una carpeta y los devuelve, todos ellos son de img, el jquery analiza la información, en una var que es una matriz, cada imagen se guarda como un objeto img con el src , ancho, altura y campo, en caso de éxito, quiero comprobar si cada imagen está cargada y, finalmente, al disparar por completo otra función y eliminar un div. Pero no sé cómo comprobar si la imagen se ha cargado por completo, he estado jugando con .complete pero parece que nunca se carga, la función se llama a sí misma hasta que se carga el img y luego se vuelve verdadera para que pueda seguir yendo. Aquí está el código, es un poco desordenado y probablemente no sea una buena codificación.

var gAllImages = [];
function checkFed()

{
    var leni = gAllImages.length;   
    for (var i = 0; i < leni; i++) {


        if (!gAllImages[i].complete) {
            var percentage = i * 100.0 / (leni);
            percentage = percentage.toFixed(0).toString() + ' %';
            console.log(percentage);
            //  userMessagesController.setMessage("loading... " + percentage);
            checkFed();

            return;

        }

    //userMessagesController.setMessage(globals.defaultTitle);
    }
}


 if($('slideshow')){
 var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>';
    $('#overall').append(topdiv);
    //console.log('alerta');
    var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){



        var d = $.parseJSON(data);
        //console.log(d[1]);



        if(typeof(d) == 'object' && JSON.parse){
            var len = d.length;
            //console.log(len);



            for(var i = 0; i < len; i++){
                var theImage = new Image();
                var element = d[i].split('"');
                //        console.log(element);
                //      console.log(element[4]);
                theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
                theImage.width = element[2];
                theImage.height = element[4];                   
                theImage.atrr = element[6];
                gAllImages.push(theImage);

            }





        // console.log(html);
        }else{
            console.log('error');
        }
    }).success(function (){




    setTimeout('checkFed', 150);




    }).error(function(){
        var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>';
        $('#loading').append(err);

    }).complete(
        function(){
            var len = gAllImages.length;
            var html = '<ul class="slides">'    
            for(var i = 0; i < len; i++){
                html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>';


            }
            html += '</ul>';
            $('#slideshow').append(html);
        }
        );
 jqxhr.complete(function(){
    //
    imageSlide();
    $('#loading').remove();
    //
    console.log('completed');
});
}

Si saco la recursividad de checkFed (), obviamente, el script finaliza y cuando las imágenes se colocan en el html, se cargan bien y rápido, ¿nunca se están cargando en el caché? Cualquier otra sugerencia en otras partes del código también son bienvenidas.

Respuestas a la pregunta(2)

Su respuesta a la pregunta