JOURMOLY

Assets.js trae algunos métodos que nos permiten inyectar en nuestra página elementos script, link, como así también precargar imágenes. Si querés podés pasar directamente a los ejemplos con Assets.js de Mootools o seguir leyendo la explicación de cada uno de sus métodos.

Asset.javascript

Asset.javascript nos permite inyectar scripts en cualquier momento. Como primer parámetro debemos indicar la ruta hacia nuestro fichero de javascript, como segundo parámetro, opcionalmente, podemos indicar una serie de atributos para nuestro elemento script.

1
2
3
4
5

new Asset.javascript('script.js', 
{
        tag: 'unTag',
        id: 'script1'
});

El código anterior insertaría en nuestra pagina lo siguiente:

1

<script tag="unTag" id="script1" src="script.js"></script>

Asset.css

Asset.css funciona de la misma manera que Asset.javascript, pero inserta un elemento link de css. Es decir, podemos cambiar el aspecto de nuestro sitio con un solo click y sin recargar la página.

1
2
3
4

new Asset.css('estilo1.css', 
{
        id: 'unId'
});

El código anterior produce:

1

< link id="unId" href="estilo1.css" type="text/css" media="screen" rel="stylesheet">

Asset.image

Asset.image nos permite precargar una imagen, la cual no aparecerá hasta que la insertemos manualmente en algún sitio de nuestro código. Los parámetros son los mismos que en Asset.javascript, el primero es la url de la imagen y el segundo es un objeto con los tags que queramos para nuestro nuevo elemento.

1
2
3
4

var imagen = new Asset.image('mootools.jpg', 
{
        'class': 'imagenes'
});

En la variable imagen tendremos nuestro nuevo elemento img el cual es muy sencillo de insertar en nuestra pagina:

1

$('id-de-nuestro-div').adopt(imagen);

Asset.images

De similar funcionamiento que Asset.image, Asset.images nos permite cargar varias imágenes en un solo paso retornando al final un arreglo con todos los elementos img que fueron cargados. El primer parámetro es un arreglo con las rutas de las imagenes que queremos cargar, el segundo parámetro es un objeto con las funciones para los eventos onProgress y/o onComplete.

onProgress es una función que se ejecuta cada vez que se carga una imagen de nuestro arreglo. Trae como parámetro el valor del contador de imágenes cargadas hasta el momento y this, dentro de la función, es el elemento img recientemente cargado.

1
2
3
4
5
6
7
8

var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
var imagenes = new Asset.images(aCargar,
{
	onProgress: function(contador)
	{
		$('id-de-nuestro-div').adopt(this);
	}
});

onComplete es la función que se ejecuta cuando todas las imágenes ya fueron cargadas.

1
2
3
4
5
6
7
8
9
10
11

var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
var imagenes = new Asset.images(aCargar,
{
	onComplete: function()
	{
		imagenes.each(function(el)
		{
			$('id-de-nuestro-div').adopt(el);
		});
	}
});

Visita los ejemplos con Assets.js para quitarte las dudas.

• Se viene, se viene: Mootools 1.2 RC1
• W3C Validator se renueva?
• Más tutoriales y ayuda sobre Mootools
• Fx.Slide, un ejemplo más
• Mootools 1.2 ya está lista!
• Efectos con Mootools: Fx.Styles