Discussion :

[Billy KiT]

Bonjour à tous,

j'ai un problème sur une petite application avec zoom à la molette de souris. La photo à zoomer/dézoomer est grande. Sur Chrome, cela fonctionne parfaitement jusqu'à ce que je fasse perdre puis reprendre le focus à la fenêtre. A partir de là, il se passe 5 à 10 secondes où ça rame vraiment puis tout rentre dans l'ordre.
Cela ne vient pas de l'évènement mousewheel, car le problème est le même avec des boutons. Il semble que Chrome n'ait plus l'image en mémoire et qu'il qu'il lui faut un moment pour la retrouver (???).
Aucun souci sur IE et FF.

Toute aide sera la bienvenue, merci

BK

[SpaceFrog]

et donc le jeu est d'essayer de deviner le code utilisé ?

[Billy KiT]

ça ne semble pas venir du code puisque c'est juste la modif du height et du width d'une image. Voici un petit bout de code qui fait ressortir le problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.onload = function() {
	var currentZoom = 100;
	h = document.getElementById('im').width;
	w = document.getElementById('im').height;
 
	function wheel(event){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta) {
			zzoom(delta);
		}
	}
 
	function zzoom(z) {
		if ((currentZoom+z)<=10) z=currentZoom+z;
		else
		z = Math.round(currentZoom*(1+z*5/100));
		document.getElementById('im').width = h*z/100;
		document.getElementById('im').height = w*z/100;
		currentZoom = z;
	}
 
	if (window.addEventListener)
		window.addEventListener('DOMMouseScroll', wheel, false);
 
	if (typeof(window.onmousewheel)=='undefined')
	document.onmousewheel = wheel;
	else
	window.onmousewheel = wheel;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id='im' src="monimage.jpg" />

L'image fait 2700 x 1900 pixels. Comme je l'ai dit, le mousewheel n'est pas en cause.

merci
BK

[p3ga5e]

D’après les symptômes que tu décris, cela ressemble fort à un swap mémoire.

A mon avis, le fait de manipuler ton image avec le DOM, n’aide pas. Le moteur de rendu html de Chrome (WebKit) n’est pas adapter pour ce genre d’opération.
Je te conseil d’utiliser un moteur de rendu vectoriel, pour Chrome ils en existent au moins 4 :

• Le context 2D de la balise canvas
• Le context WebGL de la balise canvas
• Le moteur de rendu Flash
• Le moteur de rendu SVG

[Billy KiT]

Le problème vient du moteur de rendu de Chrome qui applique un rééchantillonage à l'image (resampling) qui d'ailleurs donne un résultat assez impressionnant. Mais quand ce rendu a été appliqué (après un petit timeout), l'image originale est virée de la mémoire et elle est recalculée systématiquement, ce qui consomme de la CPU.
Il y a une solution qui consiste à forcer Chrome à ne pas rééchantilloner

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img style="image-rendering:-webkit-optimize-contrast;"

Je vais voir si on peut modifier dynamiquement ce style après un timeout pour profiter quand même du rendu.

BK

[Billy KiT]

oui on peut avec style.imageRendering

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
window.onload = function() {
	var currentZoom = 100;
	var renderingTimer;
	h = document.getElementById('im').width;
	w = document.getElementById('im').height;
 
	function wheel(event){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120; 
		} else if (event.detail) {
			delta = -event.detail/3;
		}
		if (delta) {
			zzoom(delta);
		}
	}
 
	function zzoom(z) {
		clearTimeout(renderingTimer);
		document.getElementById('im').style.imageRendering='-webkit-optimize-contrast';
		if ((currentZoom+z)<=10) z=currentZoom+z;
		else
		z = Math.round(currentZoom*(1+z*5/100));
		document.getElementById('im').width = h*z/100;
		document.getElementById('im').height = w*z/100;
		currentZoom = z;
		renderingTimer = setTimeout(function () {document.getElementById('im').style.imageRendering='auto'}, 700); // applique rendu Chrome au bout de 700 ms
	}
 
	if (window.addEventListener)
		window.addEventListener('DOMMouseScroll', wheel, false);
 
	if (typeof(window.onmousewheel)=='undefined')
	document.onmousewheel = wheel;
	else
	window.onmousewheel = wheel;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id='im' src="monimage.jpg" style="image-rendering:-webkit-optimize-contrast;" />

Pour ceux que ça interesse et pour Chrome uniquement (Safari pas testé)

BK