JMiur [E]

Pese a que este artículo de El MicoX fue publicado hace ya varios años, no deja de ser muy interesante y una técnica útil. Se trata de cargar archivos de JavaScript de manera condicional, es decir, sólo cuando nosotros queremos y, de esta manera, aliviar la carga general de nuestro sitio.

Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.

La teoría de esto es muy simple, sólo requerimos un poco de código:
<script type='text/javascript'>
//<![CDATA[
function include(archivo) {
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>
Esa función, cargará un archivo de JavaScript de manera dinámica; por ejemplo, si hacemos click en este enlace, estamos tratando de ejecutar algo que no existe:


No pasará nada, tal vez el navegador no dirá que hay un error, es que el código del enlace es este:
<a href="javascript:miFuncion();"> ....... </a>
Y, como se quiere ejecutar algo que no existe, simplemente no pasa nada así que ahora, cargaremos el script con la función. En este ejemplo, usando otro enlace:
<a href="javascript:include('URL_archivo');"> ....... </a>
Probamos:


¿Habrá pasado algo?

Intentemos ejecutar la función con el mismo enlace anterior:

7 comentarios:

Claudio Casco (Filómata)  

Hola JMiur!. Fuera de tópico. Antes que nada, gracias por responder a mi consulta sobre la paginación.
En el blog (www.polikratos.blogspot.com) coloqué el truco "entradas relacionadas" siguiendo tus instrucciones. No puedo modificar el aspecto totalmente. En este caso, a) colocar una imagen de fondo igual al fondo del post-body o sidebar o un recuadro, b) modificar el margen de los links, lo veo muy tirado a la derecha con relación al título y c) Darle color al título.
Gracias nuevamente,
Cordialmente,

Responder
JMiur  

Claudio:

Tienes agregada esta parte que es la que define el esquema gráfico de ese rectángulo:
.post-footer-line-4 {
background:url("") no-repeat scroll 0 10% transparent;
margin:0 0 10px 20px;
}

Ahí puedes eliminar esas propiedades y copiar y pegar las mismas que tiene la clase post:
.post { ...... }
o bien, eliminar directamente todo eso y agregarle la clase al div este modo:

< div class='post-footer-line post-footer-line-4 post'>

De ese modo, ese rectángulo será idéntico a los posts.

Si el margen a reducir es el de la lista en si misma, basta cambiar el margen de esta parte y, donde dice 50px, poner un número menor:
.post-footer-line-4 ul li {
............
margin:0 0 0 50px;
}

Para darle color al título, lo mejor sería colocar ese tíitulo en una etiqueta SPAN y allí poner el estilo:

<span style="color:#UNCOLOR">Entradas Relacionadas</span>

Todo esto es un poco genérico y tal vez requiera otro ajuste pero, empecemos con esto.

Responder
Horacio  

Hola: No entendí mucho, la verdad... Hace un año que empece a meter mano en el diseño de blogs, y todavia sigo "verde". Explicame lo básico. Para que puedo usar un Scripts???

Responder
JMiur  

Eso no es algo que pueda explicarte.

Responder
nakahito  

esto mejora mucho la carga del blog:), los scripts mas tediosos que tengo son cufon, effects, jquery, jquery-ui-personalized-1.5.2-packed , mousewheel, rockwell,std_300font, scroll y sprinkle segun pingdom tools la carga del blog era de 4s a 6s con 10 entradas en la pag principal, estuve testeando y al agregarlos a la plantilla dentro de

<"script type='text/javascript'>
//
<"/script>

carga en 2.4s, sorprendentemente mucho mas ligero a menos que sea una simple ilusion. :D

Responder
3-M-i-L-i-0  

Me vino como anillo al dedo, lo que quiero sabes como hago para que no se vea el link del archivo, me queda así cuando pongo el cursor sobre la imagen que le agregue reemplazando el texto:

javascript:include('http://w.sharethis.com/button/buttons.js');

Acá le dejo la pagina:
www.arg-wallpapers.com.ar

JMiur  

Los enlaces siempre muestran el contenido del atributo href. Si n oqueires que se vea, deberáis usar el evento onclick en otro tipo de etiqueta.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR