✔ prüfen ob mehrere bilder geladen

[campari]

Erhalte mit Prototype ein JSON, in dem Bildernamen mit fortlaufendem Schlüssel enthalten sind.
Auf der Seite soll erkennbar sein, wenn alle Bilder geladen sind.
Aber als iKey wird immer "toJSON" angezeigt.

Zudem zeigt firebug haufenweise Fehler im Netzwerk an, und will URLs nach dem Schema laden:

img/function%20(iterator,%20context)%20%7B%20%20%20%20var%20index%20=%200;%20%20%20%20try%20{%20%20%20%20%20%20%20%20this._each(function%20(value)%20{iterator.call(context,%20value,%20index++);});%20%20%20%20}%20catch%20(e)%20{%20%20%20%20%20%20%20%20if%20(e%20!=%20$break)%20{%20%20%20%20%20%20%20%20%20%20%20%20throw%20e;%20%20%20%20%20%20%20%20}%20%20%20%20}%20%20%20%20return%20this;}

Die Funktion:

function handleResponse(originalRequest) {
    var oJson = eval("(" + originalRequest.responseText + ")");
    var iCount = oJson.length;
    var aImg = new Array();
    var oElement = document.getElementById("status").firstChild;
    
    for(var iKey in oJson) {
        aImg[iKey] = new Image();
        aImg[iKey].src = "img/" + oJson[iKey];
        aImg[iKey].onload = function() {
            oElement.nodeValue =  iKey + "/" + iCount;
        };
    }
}

 

[Sven Mintel]

Moin,

das liesse sich einfacher beantworten, wenn man das JSON sehen würde....offensichtlich ist es nicht das, was du vermutest.

 

[campari]

das JSON wird aus einfachem array gebildet:

$n=0;
foreach($aImg as $aValue) {
    $aReturn[$n] = $aValue['sImgName'];
    $n++;
}
echo json_encode($aReturn);

ajax request:

function cacheImg(sParam) {
    var myAjax = new Ajax.Request(
        "ajax.php", {
            method: 'post',
            parameters: sParam,
            onComplete: handleResponse
        }
    );
}

so wird der String in firebug angezeigt:

["t53d22-3.jpg","t53d22-6.jpg","A153586284_01-3.jpg", (etc....) ,"nigc877-6.jpg"]

 

[Sven Mintel]

das JSON wird aus einfachem array gebildet

Dann verwende auch die rechte Methode, um Arrays zu durchlaufen

Deine Variante:

for(var iKey in oJson)

...ist gedacht, um Objekte zu Durchlaufen.

Diese:

for(var iKey =0;iKey <oJson.length;++iKey )

ist für Arrays.

Der signifikante Unterschied:
ein Array ist auch ein Objekt, man kann deine Variante also schon drauf anwenden.
Aaaaber: als Objekt betrachtet hat ein Array nicht nur seine Elemente als Member, sondern auch seine sonstigen Eigenschaften, so bspw. length,reverse,join, push etc.

Das, was du dort im Beispiel im Pfad hast, ist bspw. die Iterator-Funktion, um die prototypejs den Array-Prototype erweitert.

 

[campari]

Schönen Dank!

Finale:

var iKey=0;
var oJson;
var iCount;

// handle server response
function handleResponse(originalRequest) {
    oJson = eval("(" + originalRequest.responseText + ")");
    iCount = oJson.length;
    loadImg();
}

// load single image from array
function loadImg() {
    if(iKey < iCount) {
        var oImg = new Image();
        oImg.src = "img/" + oJson[iKey];
        oImg.onload = nudge;
    }
}

// goto next img
function nudge() {
    iKey = iKey + 1;
    document.getElementById("status").firstChild.nodeValue = iKey + "/" + iCount;
    loadImg();
}