cambiar el backgroundPosition en IE va lento

[derkenuke]

Hola, toca de nuevo preguntita complicada.

He hecho un par de documentos con efectos para mover dinámicamente la imagen de fondo de una capa.

• El primero es en función de si está el ratón encima de la capa o no: link.
• El segundo mueve el fondo dependiendo de la posición del mouse en la capa: link.

Todo funciona en FF, pero en IE he descubierto que cada vez que el fondo se mueve, recarga la imagen, haciendo el proceso lentísimo. En el primer ejemplo parpadea; en el segundo ejemplo va a golpes el movimiento.



Pregunto por si conocéis algún método para evitar ésto, algun código <meta> para jugar con la caché, o si no otro procedimiento (hacerlo con capas DIV en vez de con el fondo...). El tema es complicado de buscar.

Un saludo.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

PD: No voy a poner el código del script, me parece que sobra. Pero para que comprendáis que hacen. El primero tiene un setInterval cada 10ms que suma 10 a yActual y ejecuta:

Código PHP:

  capa.style.backgroundPosition = bgX + "px " + yActual + "px"; 
   

El segundo cuando estás dentro de la capa y mueves el ratón hace:

Código PHP:

  capa.style.backgroundPosition= x + "px " + y + "px"; 
   

Con lo que su tasa de refresco es más rápida que el primero.

[MaBoRaK]

loading............



La puse en mi sitio, haciendo referencia a tu script PHP que hace el degradee y funciona normal :S probado en IE7.

http://wilmer.colosa.net/workspace/n...mples/deg.html


BUENO... PUEDES OBVIAR TODO LO QUE ESTÁ ABAJO... PORQUE LO HICE ANTES DE PROBAR EN MI SITIO Y NO TERMINÉ DE ESCRIBIR jeje

No es cos de caché y no recarga el fondo (lo ví con el sniffer).... lo que hace es.

1: Quitar el Fondo
2: Quitar la Posición
3: Poner el Fondo
4: Poner la posición

Pero... no se que tan lento lo vez... pon un demo.
Si es una imagen grande... te ocupas de que no se repita?

backgroundRepead:"no-repeat";

........... Porque le pones un setInterval? deja que el fondo se mueva a la velocidad del mouse..... supongo que quieres hacer algo como el fondo de GoogleMaps

o bien... dejar moviendo el fondo y cuando hace click... moverlo a tu gusto... nose...

pero si es así... primero haces: http://www.javascript-page.com/movingback.html

luego quitas el intervalo y mueves el fondo al compas del mouse.

SI no es ninguno de los casos... y quieres hacer:

Fade In-Out y Move

A la vez.

...........................


Bueno... viendo bien lo que creo que intentas hacer... es esto?.

Al tener un fondo que cambia su degradado cuando se pone el mouse encima se hace mas claro y cuando sale se hace oscuro... lo que quieres hacer ahí es... dependiende de la posicion Y del mouse....se modifique igual el degradado... si está por encima de la mitad vaya haciendo OSCURO? o CLARO?....

si es así entonces deverias obviar tu llamada y.....

connection closed.

[derkenuke]

Gracias por contestar MaBoRaK.

Pues yo he re-probado mi página y la colgada en tu servidor en IE6 y funciona muy a pulsos. Si funciona bien en IE7 es buena señal.

Pero en FF funciona de muerte.

Iniciado por MaBoRaK

Si es una imagen grande... te ocupas de que no se repita?

backgroundRepead:"no-repeat";

Sí sí, por supuesto está el no-repeat en el ejemplo del círculo. En el ejemplo del rectángulo degradado el fondo es una imagen de 1px de ancho y tengo el "repeat-x".

Iniciado por MaBoRaK

........... Porque le pones un setInterval? deja que el fondo se mueva a la velocidad del mouse..... supongo que quieres hacer algo como el fondo de GoogleMaps

El rectángulo tiene un setInterval, el círculo se mueve a la velocidad del mouse. Quiero decir que en el ejemplo del círculo el fondo se posiciona según la posición del mouse, y se re-posiciona cuando salta el onmousemove.

El efecto es ese, no quiero que funcione como el googleMaps de click y arrastrar el fondo (si es que te refieres a eso). El efecto era simplemente ese, ya está conseguido. Te explico el rectángulo que es el que menos he explicado, o el que menos se entiende.

Inicialmente el fondo está en (0,0), y el fondo mide de alto el triple que la capa. Pongamos que la capa mide 100, pues el fondo mide 300 y no se ven 200px del fondo porque quedan debajo. Se ve la parte oscura (de 0px a 100px).

Cuando se pone el ratón encima el fondo va subiendo a posiciones más elevadas, (0,-5), (0,-10), (0,-15)... así hasta (0,-200), entonces se ve en la capa la parte del fondo desde los 200px de alto hasta los 300px (la parte clarita del degradado).

Cuando sacas el ratón de la capa hace el proceso contrario hasta mostrar la parte oscura.

El caso es que los dos scripts me van lentos en IE6.

Y no sé por qué en el ejemplo ese que me has pasado en IE6 no parece que vaya más lento que firefox, pero he visto que la variable speed (la que define el tiempo que tarda en re-llamarse a función que re-posiciona el fondo) tiene valor 0, luego tendría que bloquear el navegador o algo por el estilo en teoría no? Pues no lo hace. De todas maneras he probado en poner a 0 mi setInterval y en FF2 va peor (normal) y se ve peor el efecto (normal) pero en IE6 ya va muy muy lento.




Bueno, creo que estoy más perdido que al principio... quizás no pueda trabajar con imágenes para hacer algo "tan pesado".


Un saludo

[MaBoRaK]

loading............


Prueba en otra PC, talvez no tengas DirectX..... o tu tarjeta gráfica sea muy baja..... explicame bien esto...


TUS ejemplos van lento y LOS MIOS van normal?

o es lento en ambos casos?



connection closed.

[derkenuke]

La tarjeta gráfica de este pc es muy buena (6600gt) y la ram también (1gb). El procesador 2000mhz... no sé, no creo que sea la velocidad baja. El directx que tiene es el 9.0b creo... tampoco lo tiene desfasado porque juego aquí y los juegos van bien.


Puede que a ti te vaya bien porque lo probaste en IE7. Si tienes IE6 prueba mis ejemplos en ese navegador.

Lo que no entiendo es cómo http://www.javascript-page.com/movingback.html funciona perfectamente (aunque ralentiza la máquina, se nota) y mis scripts funcionan lento. Además el ratio de refresco de esta página es muy alto, y el mío es menor...

No sé... éso es lo que no entiendo.


Y me acabo de enterar que en FF1.5 tampoco se ve el circulito de color... y eso sí que no se porqué no :( Los numeritos que muestran las coordenadas relativas del ratón sí que funcionan en todos.

[MaBoRaK]

loading..........


Cierto, lo ví!!! fue horribleee
lo que se me ocurre es.....
1ro. el HOSTING...
2do. recuerda que IE hasta no se que version solo puede tener 3 o 2 conexiones simultaneas....


connec

[MaBoRaK]

loading..........

Prueba poniendolo en el MOVE;

c.style.backgroundposition=...........;
c.style.backgroundRepeat="no-repeat";

connection closed.

[MaBoRaK]

loading..........

He visto otra cosa.... al mover el mouse fuera, y vuelver dentro recargas la imagen verdad?... ok pues cuando pones el mouse encima del texto te lo toma como mouseout y al salir del area de ese caracter lo toma como mouseover o sea... si, te carga un montonnnn...

Y la solucion esta acá http://kusor.net/traducciones/brainj...vents6.es.html

o bien.... carga la imagen antes del onmouseover... y la mandas al infinito y mas alla(101 % 101%) jejejeje esa posicion la pondra siempre fuera del recuadro y ya cuando vuelvas dentro... la pones en la posicion del mouse.,..

Pero la solucion es esa, QUITAR EL BURBUJEO.... lo probaría ahora pero estoy a full!!!


connection closed.

[derkenuke]

Bueno, ya he investigado cómo funciona esto del burbujeo de eventos y tal... es algo complicado.

Cambios que he hecho (link actualizado):

1) Ya no se recarga el fondo al hacer onmouseover. El fondo se carga en el onload de la página (posicionado en -1000,-1000) y en el onmouseover únicamente se re-posiciona.

2) En el mueveBackground he probado a poner background-repeat="no-repeat"; pero no tiene ningún efecto, así que lo he dejado tal cual (comentado).

3) En el onmouseout de la capa, que antes no había nada: Ahora detecto dónde estábamos (current) y a dónde hemos salido (related) como he podido averiguar de kusor. Si entramos y salimos del mismo elemento (current==related) ó si related está contenido en current (nodo hijo: texto o DIV con texto), entonces impedimos que se active el onmouseover (porque no hemos salido, luego no podemos entrar).
Si ocurre lo contrario (current no es related, ni está uno contenido en el otro) entonces significa que hemos salido, y activo el onmouseover.

Se supone que con el cambio 3 se ha solucionado lo del burbujeo, que ya no se sale ni se entra mil veces, solo se entra las veces que realmente se entra, y se sale muchas veces pero sólo se da por válida (mandar el fondo a -1000,-1000) si realmente se sale.



Pero esto no ha servido absolutamente de nada . FF2 igual de bien, IE6 igual de mal.



He puesto las capas con borde y he mandado ir escribiendo lo que se va haciendo (log). Se puede comprobar que si se mueve el ratón dentro de la capa, sin ir a los textos (esa parte intermedia que dicta el padding:30px), el script también funciona mal. Es decir, es un problema más gordo que el burbujeo de eventos, debe ser un problema de navegador.



Aunque gracias por la ayuda MaBoRaK. Creo que lo he hecho como debía hacerlo. Si se te ocurren más cosas las probaré.

[kepawe]

Hola derkenuke y MaBoRaK.

También tienes que controlar el burbujeo que se produce con el evento mouseover:

Código:

<div id="coord" style="font-size: 12px; color: red; float: right;"></div>
<div id="info" style="font-size: 12px; color: red; float: right;"></div>



<script type="text/javascript">

function e(q,br) {
	document.body.appendChild( document.createTextNode(q) );
	if(br!==0) document.body.appendChild( document.createElement("BR") );
}

function id(x) { return document.getElementById(x); }


var c=id("capa");
var altura = c.offsetHeight;
var anchura = c.offsetWidth;
var info=id("info");

window.onload = function() {
	ponElBackground(-200,-200,300,0,"555555","ffffff");
}

var ctrl = 0;
var fmouseover = function(ev) {
	var current, related;
	if (window.event) {
		current = this;
		related = window.event.fromElement;
	}
	else {
		current = ev.currentTarget;
		related = ev.relatedTarget;
	}
	
	
	if (current != related && !contains(current, related)) {
	info.innerHTML += "- onmouseover!, entro en "+ (ev ? ev.target.id	: window.event.srcElement.id) +"<br/>"; 
		ctrl++;
		c.onmousemove = function(ev) {
			var y = this.offsetTop;
			var x = this.offsetLeft;
			var X = ev ? ev.clientX : event.clientX ;
			var Y = ev ? ev.clientY : event.clientY ;
			x = X-x, y=Y-y;
			document.getElementById("coord").innerHTML = "coord:" + x+", "+y  + " ctrl = " + ctrl;

			mueveBackground(x,y,300);
		}
	}
}

c.onmouseover = fmouseover;

c.onmouseout = function(ev) {
	var current, related;
	if (window.event) {
		current = this;
		related = window.event.toElement;
	}
	else {
		current = ev.currentTarget;
		related = ev.relatedTarget;
	}
	
	if(current && related ){		// related puede dar undefined cuando se sale de la capa a otra ventana del sistema operativo
		if (current != related && !contains(current, related)) {
			info.innerHTML += "- onmouseout!, estaba en "+current.id+", pero he salido a "+related.id+" <br/>";
			// ni el current es igual al related (no he salido y entrado del mismo elemento) ni lo contiene, luego he salido del current, luego el evento onmouseout ha de saltar y mover el fondo a -1000,-1000
			// muevo el fondo a -1000,-1000
			mueveBackground(-1000,-1000,0);
			//activo el onmouseover
			info.innerHTML += "- activo el evento mouseover!<br/>";
			current.onmouseover = fmouseover;
		}

	}
}

Salu2

[derkenuke]

Hola kepawe, gracias por contestar.

No entiendo lo de tener que controlar de dónde he venido y sobre qué me posiciono al hacer onmouseover; ten en cuenta que al hacer onmouseout si realmente no he salido de la capa (salir realmente de la capa = el mouse pasa de la capa al elemento <BODY>) desactivo el evento onmouseout.

Quiere decir que hasta que no salgo realmente, no puedo volver a entrar realmente. (entrar realmente = el mouse pasa de estar en <BODY> a estar en la capa).


¿Por qué necesito saber de dónde vengo si sé que vengo desde <BODY>?



De todas maneras lo he probado y no da ningún fruto. Como dije el problema creo que es más profundo porque al mover verticalmente el mouse en esta franja:

Shot at 2007-07-03

Sigue habiendo ralentizaciones en IE6... y si le pongo una tasa de refresco menor pierdo la gracia del script...



Un saludo.

[kepawe]

Hola de nuevo:

La verdad no lo había probado en la página rectangular, y estado indagando y no se me ocurre como solucionar el problema.

No entiendo lo de tener que controlar de dónde he venido y sobre qué me posiciono al hacer onmouseover

Si la capa contiene otros elementos, al colocar el cursor dentro de estos elementos se vuelve a disparar el evento mouseover, cambiando un poco el código de arriba:

Código:

	ctrl++;
	if (current != related && !contains(current, related)) {

Veras que se incrementa el valor de ctrl cuando se mueve el ratón dentro de la capa y pasas por los distintos elementos que esta contiene.

Salu2

[derkenuke]

¿Y no valdría con desactivar el onmouseover en caso de que realmente no se haya salido?

Código PHP:

      if(current && related ){        // related puede dar undefined cuando se sale de la capa a otra ventana del sistema operativo
        if (current != related && !contains(current, related)) {
            // ni el current es igual al related (no he salido y entrado del mismo elemento) ni lo contiene, luego he salido del current, luego el evento onmouseout ha de saltar y mover el fondo a -1000,-1000
            // muevo el fondo a -1000,-1000
            mueveBackground(-1000,-1000,0);
            //activo el onmouseover
            info.innerHTML += "- activo el evento mouseover!<br/>";
            current.onmouseover = fmouseover;
        }
        else {
            // el current puede ser igual al related, o eso o el current contiene a related (DIV de texto interno). Así que el onmouseout NO debe hacer nada, y el siguiente onmouseover NO debe saltar!
            // no hago nada, pero desactivo el onmouseover porque seguimos dentro en realidad
            info.innerHTML += "- desactivo el evento mouseover!<br/>";
            current.onmouseover = null;
        }
    } 
   

Fíjate en el current.onmouseover = null; que hay si no se ha salido.

Un saludo.

[kepawe]

Tienes toda la razón , esto me pasa por ir a piñón fijo y no mirar bien el código, he solucionado algo que ya estaba solucionado .
Salu2