img.onerror und $('img').each

[FabianLurz]

Hallo Leute,
ich habe folgende Funktion:

function checkImage() {
    //check all images on the page  
    var imageLength = ($('img').length) - 1;    
    var imageCounter = 0;
    $('img').each(function() {
        var img = new Image();
        img.onload = function() {
        };
        img.onerror = function() {
            var imageIsRendered = false;
            var thisSrc = $(this).attr("src");
            $("img[src=\"" + thisSrc + "\"]").hide();
            for (var i = 0; i < checkedImages.length; i++) {
                if (checkedImages[i] === thisSrc) {
                    imageIsRendered = true;
                    break;
                }
            }
            
            if (imageIsRendered === false) {
                checkedImages.push(thisSrc);
                alert("error");
            }
        };
        img.src = $(this).attr('src');
        if (imageCounter === imageLength) {
            alert("now");
            createNewImages();
        }
        imageCounter++;
    });

Was diese Funktion machen soll:
1. Überprüfe alle Bilder auf der Website (durch ajax werden beim herunterscrollen neue hinzugefügt; ähnliche wie bei facebook)
2. Durch img.onerror soll geprüft werden, welche Bilder defekt sind bzw. welche nicht geladen wurden.
3. Diese werden in ein array gespeist - checkedImages.
4. Als letztes soll die Funktion createNewImages aufgerufen werden -> Alle Bilder die nicht gehen, sollen neu erstellet werden und wieder eingefügt werden

function createNewImages() {
    var data = {
        "token": token,
        "id": checkedImages
    };
    var json = JSON.stringify(data);
    $.ajax({
        type: "POST",
        url: path.apiPath + 'item.imgFly',
        dataType: "text",
        data: json,
        success: function(obj) {
            var response = JSON.parse(obj.toString().replace("(", "").replace(")", ""));
            if (response.id !== undefined) {
                for (var i = 0; i < response.id.length; i++) {
                    $("img[src=\"" + response.id[i] + "\"]").attr("src", response.id[i] + "?id=12a").fadeIn(300);
                    checkedImages.remove(response.id[i]);
                }
            }
        }
    });
}

Das Problem:
Dadurch, das img.onerror asynchron läuft, wird createNewImages() zu früh ausgeführt. Ich möchte gerne, dass createNewImages ausgeführt wird, nachdem alle Bilder geprüft und ins array geschrieben wurde.

Viele Grüße
Fabian

 

[Tobse]

Setz den Aufruf auf createNewImages nach den [c].each()[/c]-Block.

Wozu ist denn das gut?

img.onload = function() {
        };