Überprüfen Sie, ob die dynamisch geladenen Bilder vollständig sind

Ich habe einen Code, der in ein PHP-Skript schreibt, das alle Dateien in einem Ordner liest und zurückgibt. Alle sind IMGs. Die JQuery analysiert die Informationen. Auf einer Variable, die ein Array ist, wird jedes Bild als IMG-Objekt mit dem SRC gespeichert , width, height und attr, bei erfolg möchte ich überprüfen, ob jedes bild geladen ist und dann beim vollständigen feuern eine andere funktion und ein div entfernen. Aber ich weiß nicht, wie ich überprüfen soll, ob das Bild vollständig geladen wurde. Ich habe mit .complete rumgespielt, aber es scheint nie zu laden. Die Funktion ruft itsef auf, bis das img geladen ist, und gibt dann true zurück, damit es beibehalten werden kann gehen. Hier ist der Code, es ist etwas chaotisch und wahrscheinlich keine schöne Codierung.

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');
});
}

Wenn ich die Rekursivität von checkFed () herausnehme, wird das Skript offensichtlich beendet und wenn die Bilder auf den HTML-Code gestellt werden, werden sie gut und schnell geladen. Wird der Cache nie geladen? Alle anderen Vorschläge zu anderen Teilen des Codes sind ebenfalls willkommen.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage