Assets.js de mootools nos permite inyectar/insertar elementos script y link como asi también nos facilita la tarea de precargar imágenes con javascript.

Podés ver la explicación completa sobre Remote.Asset.js en mi blog,
donde también podrás encontrar mas información, ejemplos y tutoriales sobre Mootools en Castellano como asi también
sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

Remote.Asset.js

Asset.javascript

  1. $('uno').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//Insertamos script.js
  5. 	new Asset.javascript('script.js', {id: 'unId'});
  6. 	//opcionalmente podemos agregar algunos atributos, en este caso agregamos id.
  7. }); 
  1. /*script.js*/
  2. $('contenedor1').appendText('Formo parte de script.js!');
Click para probar

Asset.css

  1. $('estilo-1').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//Insertamos estilo1.css
  5. 	new Asset.css('estilo1.css', {id: 'unId'});
  6. 	//opcionalmente podemos agregar algunos atributos para el objeto link, en este caso agregamos id.
  7. });
  8. $('estilo-2').addEvent('click', function(ev)
  9. {
  10. 	new Event(ev).stop();
  11. 	new Asset.css('estilo2.css');
  12. });
  13.  
  1. /*estilo 1*/
  2. .estilos {
  3. 	background-color: #ffffff;
  4. 	color: #B4C24B;
  5. }
  6.  
  7. /*estilo 2*/
  8. .estilos {
  9. 	background-color: #CC0000;
  10. 	color: #ffffff;
  11. }
Estilo 1 Estilo 2
Jourmoly

Asset.image

  1. $('tres').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	//pre-cargamos mootools.jpg, al igual que con css y javascript
  5. 	//podemos agregar algunos atributos para nuestro nuevo objeto.
  6. 	var imagen = new Asset.image('mootools.jpg', {'class': 'imagenes'});
  7. 	//una vez que se cargó la imagen, se insertará dentro de contenedor3
  8. 	$('contenedor3').adopt(imagen);
  9. });
Click para probar

Asset.images

  1. $('cuatro').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('contenedor4').empty();
  5. 	//Precargamos un arreglo de imagenes
  6. 	var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
  7. 	var imagenes = new Asset.images(aCargar,
  8. 	{
  9. 		//cada vez que una imagen es cargada se ejecuta la funcion que definimos en el evento onProgress
  10. 		onProgress: function()
  11. 		{
  12. 			//en este caso, this es un objeto imagen
  13. 			$('contenedor4').adopt(this);
  14. 		}
  15. 	});
  16. });
Click para probar 
  1. $('cinco').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('contenedor5').empty();
  5. 	var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
  6. 	var imagenes = new Asset.images(aCargar,
  7. 	{
  8. 		//cuando todas las imagenes fueron cargadas se ejecuta onComplete
  9. 		onComplete: function()
  10. 		{
  11. 			//insertamos las imagenes una a una
  12. 			imagenes.each(function(el)
  13. 			{
  14. 				$('contenedor5').adopt(el);
  15. 			});
  16. 		}
  17. 	});
  18. });
Click para probar