Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Problemas con async (jquery deja de funcionar)

Estas en el tema de Problemas con async (jquery deja de funcionar) en el foro de Jquery en Foros del Web. Estoy queriendo cargar varios scripts jquery de forma asincrona, ya que pagespeed de google me penaliza por no hacerlo así. Uso html5 Uso la siguiente ...
  #1 (permalink)  
Antiguo 17/10/2013, 13:23
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Problemas con async (jquery deja de funcionar)

Estoy queriendo cargar varios scripts jquery de forma asincrona, ya que pagespeed de google me penaliza por no hacerlo así. Uso html5

Uso la siguiente forma

Cita:
<script async src="archivo.js"></script>
El caso es que tras hacer eso (usando async o defer) todos los scripts se paralizan y no funciona ninguno.

Lo raro de todo esto es que google al analizar mi web me indica que esta correcto puesto así, pagespeed de google me da la maxima puntuacion y además al cargar la web he comprobado que los scripts tanto con async como con defer se cargan también perfectamente. (y además compruebo que se cargan de forma asíncrona)

Pero como digo, ningún script se ejecuta. Y no lo entiendo.


He probado en 4 navegadores,
He probado con diferentes scripts de dos páginas web diferentes
He probado a cargar los script en mi web o alojarlos externamente, y también tomarlos de google.

¿Alguna idea de qué puede ser?
  #2 (permalink)  
Antiguo 17/10/2013, 14:10
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Problemas con async (jquery deja de funcionar)

Este tema te podría ser de utilidad

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #3 (permalink)  
Antiguo 17/10/2013, 14:16
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Gracias, lo acabo de leer y sigo con el mismo problema.

Pongamos por ejemplo, aprovechando el enlace que pones, lo siguiente

Cita:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Y como yo quiero que se cargue de forma asíncrona (o google me penaliza) hago esto:

Cita:
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
O bien

Cita:
<script async="async" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Y en ambos casos jquery se carga de forma asíncrona (compruebo que se carga realmente) pero los scripts que tengo en el .html no funcionan... ni en Chrome última versión, ni en Firefox última versión, ni en Opera última versión ni en IE10.

¿A qué puede deberse?
  #4 (permalink)  
Antiguo 17/10/2013, 14:19
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Problemas con async (jquery deja de funcionar)

Has usado

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     //scripts
  3. });

El post claramente dice que de esta manera evitas el error con async

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #5 (permalink)  
Antiguo 17/10/2013, 14:25
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Lo cierto es que los scripts no se ejecutan. Te pongo uno de los script que tengo en la web tal y como estaba antes y te pongo luego como está ahora tras leer el enlace, no vaya a ser que haya hecho algo mal

Cita:
<script>

(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);


</script>

Cita:
<script>$(document).ready(function(){

(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);

});
</script>
  #6 (permalink)  
Antiguo 17/10/2013, 14:27
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Problemas con async (jquery deja de funcionar)

Quita estas dos lineas:

Código Javascript:
Ver original
  1. (function($) {
  2. //y
  3. })(jQuery);

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 17/10/2013, 14:31
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

No va.

Esto tengo ahora mismo tras quitar las dos lineas

Cita:
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/> </script>

<script>$(document).ready(function(){

$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});

});
</script>

<script>$(document).ready(function(){

$('#fondo1').css({backgroundPosition: '0px 0px'});
$('#fondo2').css({backgroundPosition: '0px 0px'});
$('#fondo3').css({backgroundPosition: '0px 0px'});

$('#fondo1').animate({
backgroundPosition:"(-50000px -5000px)"
}, 480000, 'linear');

$('#fondo2').animate({
backgroundPosition:"(-50000px -5000px)"
}, 240000, 'linear');

$('#fondo3').animate({
backgroundPosition:"(-50000px -5000px)"
}, 120000, 'linear');

});


</script>
  #8 (permalink)  
Antiguo 17/10/2013, 14:35
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Problemas con async (jquery deja de funcionar)

Cabe la posibilidad de colocar ese código en un archivo aparte y llamarlo tambien con async???

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 17/10/2013, 14:37
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Si claro, imagino que te refieres al codigo excepto a

Cita:
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/> </script>
Ahora lo hago y te digo
  #10 (permalink)  
Antiguo 17/10/2013, 14:42
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Ahora no se ejecuta ningún script, ni usando async ni sin usarlo. (He probado con los dos)

Y lo que tengo ahora mismo es lo siguiente:
Cita:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/> </script>
<script src="/jquery.backgroundPosition.js" </script>
<script src="/jquery.prueba.js" </script>
Donde backgroundPosition.js es

Cita:
$(document).ready(function(){

$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});

});
y prueba.js es

Cita:
$(document).ready(function(){

$('#fondo1').css({backgroundPosition: '0px 0px'});
$('#fondo2').css({backgroundPosition: '0px 0px'});
$('#fondo3').css({backgroundPosition: '0px 0px'});

$('#fondo1').animate({
backgroundPosition:"(-50000px -5000px)"
}, 480000, 'linear');

$('#fondo2').animate({
backgroundPosition:"(-50000px -5000px)"
}, 240000, 'linear');

$('#fondo3').animate({
backgroundPosition:"(-50000px -5000px)"
}, 120000, 'linear');

});
  #11 (permalink)  
Antiguo 17/10/2013, 14:49
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: Problemas con async (jquery deja de funcionar)

Las dos funciones deben estar dentro del mismo document.ready o el $.extend debe ir por fuera si es usado en mas partes del sitio.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #12 (permalink)  
Antiguo 17/10/2013, 14:59
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Las pongo las dos dentro del mismo document.ready (el $.extend no se usa en más sitios)

Queda así

Cita:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/> </script>
<script src="jquery.backgroundPosition.js" </script>

Y backgroundPosition.js

Cita:
$(document).ready(function(){

$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});

});

$('#fondo1').css({backgroundPosition: '0px 0px'});
$('#fondo2').css({backgroundPosition: '0px 0px'});
$('#fondo3').css({backgroundPosition: '0px 0px'});

$('#fondo1').animate({
backgroundPosition:"(-50000px -5000px)"
}, 480000, 'linear');

$('#fondo2').animate({
backgroundPosition:"(-50000px -5000px)"
}, 240000, 'linear');

$('#fondo3').animate({
backgroundPosition:"(-50000px -5000px)"
}, 120000, 'linear');

});

En este caso los scripts no se ejecutan ni con async ni sin async

Pero me ha ocurrido una cosa muy curiosa, y te cuento.

Dejando esto en el html

Cita:
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"/> </script>
<script src="/jquery.backgroundPosition.js" ></script>


<script> $(document).ready(function(){

$('#fondo1').css({backgroundPosition: '0px 0px'});
$('#fondo2').css({backgroundPosition: '0px 0px'});
$('#fondo3').css({backgroundPosition: '0px 0px'});

$('#fondo1').animate({
backgroundPosition:"(-50000px -5000px)"
}, 480000, 'linear');

$('#fondo2').animate({
backgroundPosition:"(-50000px -5000px)"
}, 240000, 'linear');

$('#fondo3').animate({
backgroundPosition:"(-50000px -5000px)"
}, 120000, 'linear');

});
</script>
Y dejando esto en el background....js

Cita:
$(document).ready(function(){

$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});

});
Entonces los scripts si se ejecutan, y fijate que estoy usando async

¡No entiendo nada!
  #13 (permalink)  
Antiguo 17/10/2013, 15:07
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Añado que aunque si funcionan los scripts con ese código, lo cierto es que haciendo las pruebas de carga con Pingdom, se comprueba que el async no es real, ya que los scripts se cargan antes que el resto de la web
  #14 (permalink)  
Antiguo 17/10/2013, 15:23
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Conseguido!

Se me olvidó quitar una línea
Cita:
});
Una vez hecho eso, he de poner async="async"

Y los scripts se cargan de forma asincrona y ademas se ejecutan!

Gracias!
  #15 (permalink)  
Antiguo 20/10/2013, 14:26
 
Fecha de Ingreso: octubre-2012
Mensajes: 27
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Problemas con async (jquery deja de funcionar)

Hola, el problema no se ha solucionado. Fui demasiado rapido a la hora de darlo por solucionado. ¿Tengo que seguir aqui o abro un nuevo tema? ¿Y si sigo aqui como quito lo de "solucionado"?

Tras probar con
Cita:
$(document).ready(function(){
pero aunque en un principio funcionaba, el problema es que aunque la mayoría de las veces los scripts funcionan, tras cargar varias veces la página, los scripts dejan de funcionar en alguna ocasión. Imagino que suele ser porque se cargan antes que el async jquery.1.9.0.min.js y se quedan bloqueados.

El fallo suele ser aleatorio, ya que lo mismo falla tras 4 intentos, que lo mismo falla al primer intento de cargar la página.


Con
Cita:
window.onload = function () {
soluciono ese problema. Cierto que los scripts tardan algo más en ejecutarse pero como la pagina ocupa poco apenas se nota. El problema ahora es que tengo un slider y este muestra todas las imagenes antes de comenzar a ejecutarse, por lo que queda muy feo. No entiendo tampoco el motivo, si no uso async el slider se espera hasta que pase un tiempo para mostrar la segunda imagen, pero si uso asyns, el slider muestra muy rapidamente todas las imagenes y luego se reinicia, comenzando de nuevo por la primera. Todo en menos de 1 segundo.

El codigo original del slider es el siguiente
Cita:
<script>

$(document).ready(function(){
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(2500)
.next('div').fadeIn(2000)
.end().appendTo('#slider');}, 5000);
});


</script>
Si lo dejo asi, el slider se bloquea cada x veces como dije antes. Asi que no sirve

Si en cambio lo cambio a

Cita:
<script>

window.onload = function () {
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(2500)
.next('div').fadeIn(2000)
.end().appendTo('#slider');}, 5000);
}


</script>
Muestra todas las imagenes antes de que la web muy rapido antes de comenzar. Supongo que las tomara de la caché del navegador, porque las muestra muy rapido antes de que se cargen.

Última edición por Ziddhartax; 20/10/2013 a las 15:14

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:18.