11548 sujets

JavaScript, DOM et API Web HTML5

Probleme 'stack overflow' sous IE

Bonjour à tous,

Je vous expliques mon problème. j'ai une fonctionne qui se contente de précharger des images en fonction d'un tableau d'urls. Sous FF pas de soucis mais sous IE, si on lance la fonction a plusieurs reprises, il y a des comportements bizard voir même une alerte 'stack overflow at line: 0'.

D'où celà peut-il provenir ?

Merci d'avance.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
</head>
<body>

<input type="button" onclick="test()" value="test"/>
<p id="log">Log...</p>

<script type="text/javascript">
var lstImages = ['http://www.siteecom.net/tmp/annadrill/gfx/img1.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img2.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img3.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img4.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img5.jpg',
'http://www.siteecom.net/tmp/annadrill/gfx/img6.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img7.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img8.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img9.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img10.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img11.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img12.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img13.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img14.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img15.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img16.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img17.jpg', 
'http://www.siteecom.net/tmp/annadrill/gfx/img18.jpg'];

function $ImagePreload(lstImages, callBack){
	if(lstImages.length==0) return;
	if(!callBack) var callBack = function(){};
	var handle = new Image;
	var currentImage = 0;
	handle.onload = function(){
		callBack({
			position: currentImage+1,
			total: lstImages.length,
			percent: Math.floor(((currentImage+1)/lstImages.length)*100),
			src: lstImages[currentImage],
			height: handle.height,
			width: handle.width
		});
		if(lstImages[currentImage+1]){
			currentImage++;
			handle.src = lstImages[currentImage];
		}
	};
	handle.src = lstImages[currentImage];
};

function test(){
	document.getElementById('log').innerHTML = '';
	$ImagePreload(lstImages, function(infos){
		document.getElementById('log').innerHTML += infos.src+'<br/>';
	});
};
</script>
</body>
</html>
Salut,

Etrange, en effet. Essaie peut-être de ne pas réutiliser le même objet Image pour chaque préchargement. Possible que ce soit ça qui ne plaise pas à IE.
Effectivement, ca doit être le fait que j'utilises le meme objet. Mais egalement que j'ai une récursivité dans la fonction 'onload'.

je viens d'essayer de créer un tableau contenant n objets Images et avec une boucles, affecter la source pour chaque images. Ca fonctionne impec. Le probleme c'est que forcément mes retours (fonction callBack) viennent dans un ordre aléatoire.

Je vai bien trouver un moyen de précharger une à une mes images.


Merci beaucoup
Kadheus a écrit :
Mais egalement que j'ai une récursivité dans la fonction 'onload'...

... Ce qui est justement dû au fait que tu n'utilises qu'un objet. Smiley smile
Kadheus a écrit :
je viens d'essayer de créer un tableau contenant n objets Images et avec une boucles, affecter la source pour chaque images. Ca fonctionne impec. Le probleme c'est que forcément mes retours (fonction callBack) viennent dans un ordre aléatoire.

Si c'est un problème, tu peux utiliser une solution similaire à celle que tu utilisais jusque là, mais en créant un nouvel objet Image à chaque fois.
Sujet clos
Aller à