Dit is het betreffende stukje code:
ImageLoader = function() {
var amtLoad = 0;
var loadList = [];
var loadedImages = [];
var callback;
this.loadAll = function() {
var t = this;
for(var i = 0; i < loadList.length; i++) {
$.get(loadList, function() {
t.loaded();
});
}
console.log("Test");
};
this.loaded = function() {
console.log("Loaded");
amtLoad--;
if(amtLoad <= 0) {
callback();
}
};
};
Ik doe het volgende. Ik heb een object dat afbeeldingen kan pre-loaden. Ik voeg urls toe aan dat object, en roep dan de functie loadAll() aan. Die laadt alle urls die in de loadList waren gezet.
Het werkt allemaal, maar ik ben er achter gekomen dat de requests achter elkaar worden uitgevoerd, in de volgorde van de loop. Daardoor gaat het laden langzamer. De requests zijn niet tegelijkertijd. Terwijl de javascript juist wel asynchroon ernaast verder gaat. Dus javascript blokt niet (nooit bij ajax requests) maar de requests worden niet tegelijkertijd behandeld. Ik weet wel dat dit gewoon moet kunnen. Hoe doe ik dit? Is het een jquery parameter die ik moet toevoegen?
Om het voorbeeld nog duidelijker te maken:
Stel ik zet in de loadlist 10x een url naar "wait.php". Dat php script doet een sleep() van 2 seconden. Dan duurt het laden 20 seconden, terwijl het de bedoeling is dat al die 10 requests direct achter elkaar worden verzonden en tegelijkertijd dus "laden" en dat het dus eigenlijk rond de 2 seconden zou moeten duren.
Toevoeging
Als ik setTimeout() gebruik bij elke lus in de loop, dan gaan de requests wel tegelijk. Dit is dus een oplossing, maar is er geen betere?
