Script wird nicht richtig geladen beim ersten start

[freshUser]

Hallo,
experimentiere gerade mit einem image preload. Wenn ich den Firefox komplett neu starte bekomme ich am ende die ausgabe 0 in der console und keine ausgabe im document. wenn ich die Seite mit F5 aktualisiere bekomme ich die Summe der Bilder "naturalWidth" & die Bilder im document dargestellt... woran liegt das das script beim ersten laden nicht richtig funktioniert?

	if(document.images) {
		
		images = ['1', '2', '3', '4', '5'];
		imagesWidth = 0;
		
		
		for(var i = 0; i <= images.length; i++){
			image = "img"+i;
			image = new Image();
			image.src = "images/"+images[i]+"s.jpg";
			image.alt = "image " + (parseInt(i)+1);
			
			if(image.complete){
				document.getElementById('gallery-slider').appendChild(image);
				imagesWidth += image.naturalWidth;
			}
			
		}
		
		console.log(imagesWidth);

	}

danke für ein feedback!

 

[tsseh]

Bilder im document dargestellt... woran liegt das das script beim ersten laden nicht richtig funktioniert?

weil if(image.complete) beim laden der seite und damit der bilder nicht zieht, da diese noch geladen werden. beim 2. mal liegen sie im cache und sind damit sofort verfügbar.
https://developer.mozilla.org/en-US/docs/Web/Events/load

 

[freshUser]

vielen dank für das feedback!

 

[kkapsner]

Seit wann verhält sich denn der FF da genauso wie der IE? Hatte das so im Kopf, dass nur der IE die Eigenschaften des Bildes synchron reinschreibt, wenn das Bild schon im Cache ist. Chrome ist immer noch asynchron.

PS: Deine Schleife wird 6 mal durchlaufen und nicht 5 mal...
PPS: Die Zeile image = "img"+i; ist komplett sinnfrei, da die Variable image direkt in der nächsten Zeile überschieben wird.
PPPS: DOM-Zugriffe sind langsam (bei dir das document.getElementById()). Deswegen solltest du die Node, die du davon zurückbekommst, in einer Variablen zwischenspeichern.